/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
/* ==========================================================================
       HTML5 display definitions
       ========================================================================== */
/**
     * Correct `block` display not defined in IE 8/9.
     */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

/**
     * Correct `inline-block` display not defined in IE 8/9.
     */
audio,
canvas,
video {
  display: inline-block; }

/**
     * Prevent modern browsers from displaying `audio` without controls.
     * Remove excess height in iOS 5 devices.
     */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
     * Address styling not present in IE 8/9.
     */
[hidden] {
  display: none; }

/* ==========================================================================
       Base
       ========================================================================== */
/**
     * 1. Set default font family to sans-serif.
     * 2. Prevent iOS text size adjust after orientation change, without disabling
     *    user zoom.
     */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
     * Remove default margin.
     */
body {
  margin: 0; }

/* ==========================================================================
       Links
       ========================================================================== */
/* ==========================================================================
       Typography
       ========================================================================== */
/**
     * Address variable `h1` font-size and margin within `section` and `article`
     * contexts in Firefox 4+, Safari 5, and Chrome.
     */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
     * Address styling not present in IE 8/9, Safari 5, and Chrome.
     */
abbr[title] {
  border-bottom: 1px dotted; }

/**
     * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
     */
b,
strong {
  font-weight: bold; }

/**
     * Address styling not present in Safari 5 and Chrome.
     */
dfn {
  font-style: italic; }

/**
     * Address differences between Firefox and other browsers.
     */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/**
     * Address styling not present in IE 8/9.
     */
mark {
  background: #ff0;
  color: #000; }

/**
     * Correct font family set oddly in Safari 5 and Chrome.
     */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em; }

/**
     * Improve readability of pre-formatted text in all browsers.
     */
pre {
  white-space: pre-wrap; }

/**
     * Set consistent quote types.
     */
q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

/**
     * Address inconsistent and variable font size in all browsers.
     */
small {
  font-size: 80%; }

/**
     * Prevent `sub` and `sup` affecting `line-height` in all browsers.
     */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* ==========================================================================
       Embedded content
       ========================================================================== */
/**
     * Remove border when inside `a` element in IE 8/9.
     */
img {
  border: 0; }

/**
     * Correct overflow displayed oddly in IE 9.
     */
svg:not(:root) {
  overflow: hidden; }

/* ==========================================================================
       Figures
       ========================================================================== */
/**
     * Address margin not present in IE 8/9 and Safari 5.
     */
figure {
  margin: 0; }

/* ==========================================================================
       Forms
       ========================================================================== */
/**
     * Define consistent border, margin, and padding.
     */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
     * 1. Correct `color` not being inherited in IE 8/9.
     * 2. Remove padding so people aren't caught out if they zero out fieldsets.
     */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
     * 1. Correct font family not being inherited in all browsers.
     * 2. Correct font size not being inherited in all browsers.
     * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
     */
button,
input,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
     * Address Firefox 4+ setting `line-height` on `input` using `!important` in
     * the UA stylesheet.
     */
button,
input {
  line-height: normal; }

/**
     * Address inconsistent `text-transform` inheritance for `button` and `select`.
     * All other form control elements do not inherit `text-transform` values.
     * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
     * Correct `select` style inheritance in Firefox 4+ and Opera.
     */
button,
select {
  text-transform: none; }

/**
     * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
     *    and `video` controls.
     * 2. Correct inability to style clickable `input` types in iOS.
     * 3. Improve usability and consistency of cursor style between image-type
     *    `input` and others.
     */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
     * Re-set default cursor for disabled elements.
     */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
     * 1. Address box sizing set to `content-box` in IE 8/9.
     * 2. Remove excess padding in IE 8/9.
     */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
     * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
     * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
     *    (include `-moz` to future-proof).
     */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box; }

/**
     * Remove inner padding and search cancel button in Safari 5 and Chrome
     * on OS X.
     */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
     * Remove inner padding and border in Firefox 4+.
     */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
     * 1. Remove default vertical scrollbar in IE 8/9.
     * 2. Improve readability and alignment in all browsers.
     */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */ }

/* ==========================================================================
       Tables
       ========================================================================== */
/**
     * Remove most spacing between table cells.
     */
table {
  border-collapse: collapse;
  border-spacing: 0; }

/* helpers
  ----------------------------------*/
[data-bind*="ojComponent"]:not(.oj-component-initnode) {
  visibility: hidden; }

.oj-theme-json {
  font-family: '{"name":"alta","targetPlatform":"ios"}'; }

.oj-helper-hidden-accessible, .oj-radio,
.oj-checkbox {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.oj-helper-clearfix:before, .oj-helper-clearfix:after {
  content: " ";
  display: table; }

.oj-helper-clearfix:after {
  clear: both; }

/* Used by the framework's support for detecting resize */
.oj-helper-detect-expansion,
.oj-helper-detect-contraction {
  position: absolute;
  overflow: hidden;
  visibility: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  direction: ltr; }

.oj-helper-hidden {
  display: none !important; }

/* aligns text left by default, aligns right when dir="rtl" is set on html element
     NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-text-align-start {
  text-align: left !important; }
  html[dir="rtl"] .oj-helper-text-align-start {
    text-align: right !important; }

/* aligns text right by default, aligns left when dir="rtl" is set on html element
     NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-text-align-end {
  text-align: right !important; }
  html[dir="rtl"] .oj-helper-text-align-end {
    text-align: left !important; }

/* Sets the start margin, equivalent to setting
     margin-left: auto in ltr languages and margin-right: auto in rtl languages */
html:not([dir="rtl"]) .oj-helper-margin-start-auto {
  margin-left: auto; }

html[dir="rtl"] .oj-helper-margin-start-auto {
  margin-right: auto; }

/* Sets the end margin, equivalent to setting
     margin-right: auto in ltr languages and margin-left: auto in rtl languages */
html:not([dir="rtl"]) .oj-helper-margin-end-auto {
  margin-right: auto; }

html[dir="rtl"] .oj-helper-margin-end-auto {
  margin-left: auto; }

/* aligns text right
     NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-text-align-right {
  text-align: right !important; }

/* aligns text left
     NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-text-align-left {
  text-align: left !important; }

/* Used by the ojModule binding on a DIV that will hold cached Views */
.oj-helper-module-cache {
  position: absolute;
  display: none; }

.oj-focus-config {
  font-family: '{"focusHighlightPolicy":"nonPointer"}'; }

/* html */
/* --------------------------------------------------------------- */
html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 1em; }

/* body */
/* --------------------------------------------------------------- */
body {
  background-repeat: repeat;
  background-position: top left;
  color: #000;
  background-color: #ffffff;
  touch-action: manipulation; }

/* links */
/* --------------------------------------------------------------- */
a {
  color: #0572ce;
  line-height: inherit;
  text-decoration: none; }

a:visited {
  color: #0572ce; }

a:hover, a:focus {
  text-decoration: none; }

a:active {
  font-weight: normal;
  background-color: #d4d4d6;
  border-radius: 2px; }

a.oj-disabled {
  color: #0572ce;
  opacity: 0.5;
  cursor: default;
  text-decoration: none; }

/* header */
/* --------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  color: #3a3a3a;
  font-family: inherit;
  font-style: normal;
  font-weight: normal;
  margin: 8px 0;
  padding: 0 0 2px; }

h1 {
  font-size: 1.75rem; }

h2 {
  font-size: 1.5rem; }

h3 {
  font-size: 1.25rem; }

h4 {
  font-size: 1rem; }

h5 {
  font-size: 0.875rem; }

.oj-header-border {
  border: solid #d5dfe5;
  border-width: 0 0 1px;
  padding: 0 0 7px; }

/* hr */
/* --------------------------------------------------------------- */
hr {
  border: solid #e7e7e9;
  border-width: 1px 0 0;
  margin: 7px 0; }

/* p */
/* --------------------------------------------------------------- */
p {
  margin: 0 0 12px 0; }

/* lists */
/* --------------------------------------------------------------- */
ul, ol {
  margin: 12px 0;
  padding-left: 40px; }

ul ul, ul ol, ol ul, ol ol {
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 30px; }

ul li, ol li {
  line-height: 1.25; }

.oj-text-xs {
  font-size: 0.75rem; }

.oj-text-sm {
  font-size: 0.875rem; }

.oj-text-primary-color {
  color: #000; }

.oj-text-secondary-color {
  color: #595959; }

.oj-margin {
  margin: 10px; }

.oj-margin-horizontal {
  margin-left: 10px;
  margin-right: 10px; }

.oj-margin-vertical {
  margin-top: 10px;
  margin-bottom: 10px; }

.oj-margin-top {
  margin-top: 10px; }

.oj-margin-bottom {
  margin-bottom: 10px; }

html:not([dir="rtl"]) .oj-margin-start {
  margin-left: 10px; }

html[dir="rtl"] .oj-margin-start {
  margin-right: 10px; }

html:not([dir="rtl"]) .oj-margin-end {
  margin-right: 10px; }

html[dir="rtl"] .oj-margin-end {
  margin-left: 10px; }

.oj-margin-lg {
  margin: 20px; }

.oj-margin-lg-horizontal {
  margin-left: 20px;
  margin-right: 20px; }

.oj-margin-lg-vertical {
  margin-top: 20px;
  margin-bottom: 20px; }

.oj-margin-lg-top {
  margin-top: 20px; }

.oj-margin-lg-bottom {
  margin-bottom: 20px; }

html:not([dir="rtl"]) .oj-margin-lg-start {
  margin-left: 20px; }

html[dir="rtl"] .oj-margin-lg-start {
  margin-right: 20px; }

html:not([dir="rtl"]) .oj-margin-lg-end {
  margin-right: 20px; }

html[dir="rtl"] .oj-margin-lg-end {
  margin-left: 20px; }

.oj-padding {
  padding: 10px; }

.oj-padding-horizontal {
  padding-left: 10px;
  padding-right: 10px; }

.oj-padding-vertical {
  padding-top: 10px;
  padding-bottom: 10px; }

.oj-padding-top {
  padding-top: 10px; }

.oj-padding-bottom {
  padding-bottom: 10px; }

html:not([dir="rtl"]) .oj-padding-start {
  padding-left: 10px; }

html[dir="rtl"] .oj-padding-start {
  padding-right: 10px; }

html:not([dir="rtl"]) .oj-padding-end {
  padding-right: 10px; }

html[dir="rtl"] .oj-padding-end {
  padding-left: 10px; }

.oj-padding-lg {
  padding: 20px; }

.oj-padding-lg-horizontal {
  padding-left: 20px;
  padding-right: 20px; }

.oj-padding-lg-vertical {
  padding-top: 20px;
  padding-bottom: 20px; }

.oj-padding-lg-top {
  padding-top: 20px; }

.oj-padding-lg-bottom {
  padding-bottom: 20px; }

html:not([dir="rtl"]) .oj-padding-lg-start {
  padding-left: 20px; }

html[dir="rtl"] .oj-padding-lg-start {
  padding-right: 20px; }

html:not([dir="rtl"]) .oj-padding-lg-end {
  padding-right: 20px; }

html[dir="rtl"] .oj-padding-lg-end {
  padding-left: 20px; }

/* Icons
    --------------------------------------------------------------------*/
@font-face {
  font-family: 'Alta Icon Font';
  src: url("fonts/JetFW_iconfont.woff") format("woff"); }

/*--------------------------------------------------------------------
    /  Generic style that can be used for widget images
    /  You can use the mixin ("oj-icon-content") to generate 
    /  a class with additions/overrides
    / 
    /  For example let's say you used the mixin ("oj-icon-content") to 
    /  generate a class ".binky-icon". You
    /  could then put class="oj-icon binky-icon" on your dom element. 
    --------------------------------------------------------------------*/
.oj-fwk-icon, .oj-panel-drag-icon, .oj-panel-expand-icon, .oj-panel-collapse-icon, .oj-panel-remove-icon, .oj-confirmation.oj-train-icon, .oj-error.oj-train-icon, .oj-info.oj-train-icon, .oj-warning.oj-train-icon, .oj-listview-drag-handle, .oj-listview-card-layout .oj-listview-drag-handle, .oj-web-applayout-offcanvas-icon,
.oj-component-icon,
.oj-popup-tail.oj-popup-tail-simple {
  font-family: "Alta Icon Font";
  font-size: 16px;
  line-height: 1;
  display: inline-block;
  font-weight: normal;
  speak: none;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  color: #000;
  text-align: center;
  box-sizing: content-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  .oj-fwk-icon:before, .oj-panel-drag-icon:before, .oj-panel-expand-icon:before, .oj-panel-collapse-icon:before, .oj-panel-remove-icon:before, .oj-confirmation.oj-train-icon:before, .oj-error.oj-train-icon:before, .oj-info.oj-train-icon:before, .oj-warning.oj-train-icon:before, .oj-listview-drag-handle:before, .oj-listview-card-layout .oj-listview-drag-handle:before, .oj-web-applayout-offcanvas-icon:before,
  .oj-component-icon:before,
  .oj-popup-tail.oj-popup-tail-simple:before {
    display: inline-block; }

/*--------------------------------------------------------------------
    /  Generic style that can be used for images 
    /  App developers can use the mixin ("oj-icon-content") to generate 
    /  a class with additions/overrides
    / 
    /  For example let's say you used the mixin ("oj-icon-content") to 
    /  generate a class ".binky-icon". You
    /  could then put class="oj-icon binky-icon" on your dom element. 
    --------------------------------------------------------------------*/
.oj-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 1;
  overflow: hidden;
  direction: ltr;
  text-align: center;
  box-sizing: content-box; }
  .oj-icon:before {
    display: inline-block;
    box-sizing: content-box; }

a .oj-clickable-icon,
a.oj-clickable-icon,
a.oj-clickable-icon-nocontext {
  font-weight: normal; }

a .oj-clickable-icon,
a.oj-clickable-icon,
a.oj-clickable-icon-nocontext,
a:visited .oj-clickable-icon,
a:visited.oj-clickable-icon,
a:visited.oj-clickable-icon-nocontext,
.oj-default .oj-clickable-icon,
.oj-default.oj-clickable-icon,
.oj-default.oj-clickable-icon-nocontext {
  color: #878c90; }

a:hover .oj-clickable-icon,
a:hover.oj-clickable-icon,
a:hover.oj-clickable-icon-nocontext,
.oj-hover .oj-clickable-icon,
.oj-hover.oj-clickable-icon,
.oj-hover.oj-clickable-icon-nocontext {
  color: #85bbe7; }

a:active .oj-clickable-icon,
a:active.oj-clickable-icon,
a:active.oj-clickable-icon-nocontext,
.oj-active .oj-clickable-icon,
.oj-active.oj-clickable-icon,
.oj-active.oj-clickable-icon-nocontext {
  color: #0572ce; }

a.oj-selected .oj-clickable-icon,
a.oj-selected.oj-clickable-icon,
a.oj-selected.oj-clickable-icon-nocontext,
.oj-selected .oj-clickable-icon,
.oj-selected.oj-clickable-icon,
.oj-selected.oj-clickable-icon-nocontext {
  color: #0572ce; }

a.oj-disabled .oj-clickable-icon,
a.oj-disabled.oj-clickable-icon,
a.oj-disabled.oj-clickable-icon-nocontext,
.oj-disabled .oj-clickable-icon,
.oj-disabled a .oj-clickable-icon,
.oj-disabled.oj-clickable-icon,
.oj-disabled.oj-clickable-icon-nocontext {
  color: #878c90;
  opacity: 0.5; }

.oj-fwk-icon-load:before, .oj-tree-loading .oj-tree-icon:before,
.oj-collapsed a.oj-tree-loading > .oj-tree-node-icon.oj-tree-icon:before, .oj-rowexpander-lazyload-icon:before {
  content: url("../common/images/node_anim.gif"); }

.oj-fwk-icon-status-error2,
.oj-fwk-icon-status-warning2,
.oj-fwk-icon-status-info2,
.oj-fwk-icon-status-confirmation2 {
  height: 9px;
  width: 9px;
  font-size: 9px; }

.oj-fwk-icon-status-confirmation2:before {
  content: url("../common/images/alertModifier_complete.png"); }

.oj-fwk-icon-status-info2:before {
  content: url("../common/images/alertModifier_info.png"); }

.oj-fwk-icon-status-warning2:before {
  content: url("../common/images/alertModifier_warning.png"); }

.oj-fwk-icon-status-error2:before {
  content: url("../common/images/alertModifier_error.png"); }

.oj-fwk-icon-status-confirmation, .oj-message-status-icon.oj-message-confirmation-icon, .oj-fwk-icon-status-info, .oj-message-status-icon.oj-message-info-icon, .oj-fwk-icon-status-warning, .oj-message-status-icon.oj-message-warning-icon, .oj-fwk-icon-status-error, .oj-message-status-icon.oj-message-error-icon, .oj-fwk-icon-folder-open, .oj-expanded:not(.oj-tree-type) > a .oj-tree-node-icon, .oj-fwk-icon-folder-collapsed, .oj-collapsed:not(.oj-tree-type) > a .oj-tree-node-icon, .oj-fwk-icon-document, .oj-tree-leaf:not(.oj-tree-type) a .oj-tree-node-icon {
  width: 16px;
  height: 16px;
  font-size: 16px; }

.oj-fwk-icon-status-confirmation:before, .oj-message-status-icon.oj-message-confirmation-icon:before {
  content: url("images/stat_confirm_16.png"); }

.oj-fwk-icon-status-info:before, .oj-message-status-icon.oj-message-info-icon:before {
  content: url("images/stat_info_16.png"); }

.oj-fwk-icon-status-warning:before, .oj-message-status-icon.oj-message-warning-icon:before {
  content: url("images/stat_warn_16.png"); }

.oj-fwk-icon-status-error:before, .oj-message-status-icon.oj-message-error-icon:before {
  content: url("images/stat_error_16.png"); }

.oj-fwk-icon-folder-open:before, .oj-expanded:not(.oj-tree-type) > a .oj-tree-node-icon:before {
  content: url("images/hier_folderopen_16_mono.png"); }

.oj-fwk-icon-folder-collapsed:before, .oj-collapsed:not(.oj-tree-type) > a .oj-tree-node-icon:before {
  content: url("images/hier_folderclose_16_mono.png"); }

.oj-fwk-icon-document:before, .oj-tree-leaf:not(.oj-tree-type) a .oj-tree-node-icon:before {
  content: url("images/hier_leaf_16_mono.png"); }

/* Icon Font Icons =========== */
.oj-fwk-icon-cross:before, .oj-panel-remove-icon:before, .oj-error.oj-train-icon:before, .oj-dialog-close-icon:before, .oj-combobox-clear-entry-icon:before, .oj-select-clear-entry-icon:before {
  content: "\e608"; }

.oj-fwk-icon-cross02:before, .oj-menu-icons .oj-menu-cancel-icon:before {
  content: "\e60c"; }

.oj-fwk-icon-cross03:before, .oj-tabs-close-icon:before {
  content: "\e60e"; }

.oj-fwk-icon-magnifier:before, .oj-listbox-search-icon:before, .oj-inputsearch-search-icon:before {
  content: "\e60d"; }

.oj-fwk-icon-calendar:before, .oj-inputdatetime-calendar-icon:before {
  content: "\e609"; }

.oj-fwk-icon-clock:before, .oj-inputdatetime-time-icon:before {
  content: "\e60a"; }

.oj-fwk-icon-help:before, .oj-label-help-icon:before {
  content: "\e60b"; }

.oj-fwk-icon-hamburger:before, .oj-web-applayout-offcanvas-icon:before {
  content: "\e60f"; }

.oj-fwk-icon-drag:before, .oj-panel-drag-icon:before, .oj-listview-card-layout .oj-listview-drag-handle:before {
  content: "\e610"; }

.oj-fwk-icon-folderhierarchy:before, .oj-hier-icon:before {
  content: "\e611"; }

.oj-fwk-icon-corner-drag:before {
  content: "\e618"; }

.oj-fwk-icon-checkmark:before, .oj-confirmation.oj-train-icon:before {
  content: "\e615"; }

.oj-fwk-icon-info:before, .oj-info.oj-train-icon:before {
  content: "i"; }

.oj-fwk-icon-warning:before, .oj-warning.oj-train-icon:before {
  content: "!"; }

.oj-fwk-icon-plus:before, .oj-inputnumber-up-icon:before {
  content: "\e616"; }

.oj-fwk-icon-minus:before, .oj-inputnumber-down-icon:before {
  content: "\e617"; }

.oj-fwk-icon-minimize:before, .oj-panel-collapse-icon:before {
  content: "\e613"; }
  html[dir="rtl"] .oj-fwk-icon-minimize:before, html[dir="rtl"] .oj-panel-collapse-icon:before {
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1); }

.oj-fwk-icon-maximize:before, .oj-panel-expand-icon:before {
  content: "\e614"; }
  html[dir="rtl"] .oj-fwk-icon-maximize:before, html[dir="rtl"] .oj-panel-expand-icon:before {
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1); }

.oj-fwk-icon-arrow-e:before, .oj-fwk-icon-arrow-w:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow-start:before, html[dir="rtl"] .oj-fwk-icon-arrow-end:before, html[dir="rtl"] .oj-listview-collapse-icon:before, .oj-fwk-icon-arrow-n:before, .oj-table-column-header-asc-icon:before, .oj-fwk-icon-arrow-s:before, .oj-table-column-header-dsc-icon:before, .oj-listview-expand-icon:before, html[dir="rtl"] .oj-fwk-icon-arrow-start:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow-end:before, html:not([dir="rtl"]) .oj-listview-collapse-icon:before {
  content: "\e600"; }

.oj-fwk-icon-arrow-w:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow-start:before, html[dir="rtl"] .oj-fwk-icon-arrow-end:before, html[dir="rtl"] .oj-listview-collapse-icon:before {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.oj-fwk-icon-arrow-n:before, .oj-table-column-header-asc-icon:before {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); }

.oj-fwk-icon-arrow-s:before, .oj-table-column-header-dsc-icon:before, .oj-listview-expand-icon:before {
  -webkit-transform: scale(-1, 1) rotate(90deg);
  transform: scale(-1, 1) rotate(90deg); }

.oj-fwk-icon-arrow-se:before, .oj-fwk-icon-arrow-sw:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow-s-start:before, html[dir="rtl"] .oj-fwk-icon-arrow-s-end:before, .oj-fwk-icon-arrow-nw:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow-n-start:before, html[dir="rtl"] .oj-fwk-icon-arrow-n-end:before, .oj-fwk-icon-arrow-ne:before, html[dir="rtl"] .oj-fwk-icon-arrow-n-start:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow-n-end:before, html[dir="rtl"] .oj-fwk-icon-arrow-s-start:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow-s-end:before {
  content: "\e601"; }

.oj-fwk-icon-arrow-sw:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow-s-start:before, html[dir="rtl"] .oj-fwk-icon-arrow-s-end:before {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.oj-fwk-icon-arrow-nw:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow-n-start:before, html[dir="rtl"] .oj-fwk-icon-arrow-n-end:before {
  -webkit-transform: scale(-1, -1);
  transform: scale(-1, -1); }

.oj-fwk-icon-arrow-ne:before, html[dir="rtl"] .oj-fwk-icon-arrow-n-start:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow-n-end:before {
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1); }

.oj-fwk-icon-arrow02-s:before, .oj-fwk-icon-arrow02-w:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow02-start:before, html[dir="rtl"] .oj-fwk-icon-arrow02-end:before, .oj-fwk-icon-arrow02-n:before, .oj-fwk-icon-arrow02-e:before, html[dir="rtl"] .oj-fwk-icon-arrow02-start:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow02-end:before, .oj-button-menu-dropdown-icon:before, .oj-combobox-open-icon:before, .oj-select-open-icon:before {
  content: "\e602"; }

.oj-fwk-icon-arrow02-w:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow02-start:before, html[dir="rtl"] .oj-fwk-icon-arrow02-end:before {
  -webkit-transform: scale(1, -1) rotate(90deg);
  transform: scale(1, -1) rotate(90deg); }

.oj-fwk-icon-arrow02-n:before {
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1); }

.oj-fwk-icon-arrow02-e:before, html[dir="rtl"] .oj-fwk-icon-arrow02-start:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow02-end:before {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); }

.oj-fwk-icon-arrow03-e:before, .oj-fwk-icon-arrow03-w:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow03-start:before, html[dir="rtl"] .oj-fwk-icon-arrow03-end:before, html[dir="rtl"] .oj-collapsible-close-icon:before, html[dir="rtl"] .oj-rowexpander-expand-icon:before, html[dir="rtl"] .oj-collapsed > .oj-tree-disclosure-icon:before, html[dir="rtl"] .oj-tree-drop-ptr:before, .oj-fwk-icon-arrow03-n:before, .oj-datagrid-sort-ascending-icon:before, .oj-fwk-icon-arrow03-s:before, .oj-collapsible-open-icon:before, .oj-datagrid-sort-descending-icon:before, html[dir="rtl"] .oj-fwk-icon-arrow03-start:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow03-end:before, html:not([dir="rtl"]) .oj-collapsible-close-icon:before, html:not([dir="rtl"]) .oj-rowexpander-expand-icon:before, html:not([dir="rtl"]) .oj-collapsed > .oj-tree-disclosure-icon:before, html:not([dir="rtl"]) .oj-tree-drop-ptr:before {
  content: "\e603"; }

.oj-fwk-icon-arrow03-w:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow03-start:before, html[dir="rtl"] .oj-fwk-icon-arrow03-end:before, html[dir="rtl"] .oj-collapsible-close-icon:before, html[dir="rtl"] .oj-rowexpander-expand-icon:before, html[dir="rtl"] .oj-collapsed > .oj-tree-disclosure-icon:before, html[dir="rtl"] .oj-tree-drop-ptr:before {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.oj-fwk-icon-arrow03-n:before, .oj-datagrid-sort-ascending-icon:before {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); }

.oj-fwk-icon-arrow03-s:before, .oj-collapsible-open-icon:before, .oj-datagrid-sort-descending-icon:before {
  -webkit-transform: scale(-1, 1) rotate(90deg);
  transform: scale(-1, 1) rotate(90deg); }

.oj-fwk-icon-arrow03-se:before, .oj-fwk-icon-arrow03-sw:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow03-s-start:before, html[dir="rtl"] .oj-fwk-icon-arrow03-s-end:before, html[dir="rtl"] .oj-rowexpander-collapse-icon:before, html[dir="rtl"] .oj-expanded > .oj-tree-disclosure-icon:before, .oj-fwk-icon-arrow03-nw:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow03-n-start:before, html[dir="rtl"] .oj-fwk-icon-arrow03-n-end:before, .oj-fwk-icon-arrow03-ne:before, html[dir="rtl"] .oj-fwk-icon-arrow03-n-start:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow03-n-end:before, html[dir="rtl"] .oj-fwk-icon-arrow03-s-start:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow03-s-end:before, html:not([dir="rtl"]) .oj-rowexpander-collapse-icon:before, html:not([dir="rtl"]) .oj-expanded > .oj-tree-disclosure-icon:before {
  content: "\e604"; }

.oj-fwk-icon-arrow03-sw:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow03-s-start:before, html[dir="rtl"] .oj-fwk-icon-arrow03-s-end:before, html[dir="rtl"] .oj-rowexpander-collapse-icon:before, html[dir="rtl"] .oj-expanded > .oj-tree-disclosure-icon:before {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.oj-fwk-icon-arrow03-nw:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow03-n-start:before, html[dir="rtl"] .oj-fwk-icon-arrow03-n-end:before {
  -webkit-transform: scale(-1, -1);
  transform: scale(-1, -1); }

.oj-fwk-icon-arrow03-ne:before, html[dir="rtl"] .oj-fwk-icon-arrow03-n-start:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow03-n-end:before {
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1); }

.oj-fwk-icon-caret-e:before, .oj-fwk-icon-caret-s:before, .oj-conveyorbelt-overflow-icon.oj-bottom:before, .oj-filmstrip-arrow-icon.oj-bottom:before, .oj-navigationlist-collapsible .oj-navigationlist-expand-icon:before, .oj-fwk-icon-caret-w:before, html:not([dir="rtl"]) .oj-fwk-icon-caret-start:before, html:not([dir="rtl"]) .oj-conveyorbelt-overflow-icon.oj-start:before, html:not([dir="rtl"]) .oj-filmstrip-arrow-icon.oj-start:before, html:not([dir="rtl"]) .oj-navigationlist-previous-icon:before, html:not([dir="rtl"]) .oj-hybrid-applayout-header-icon-back:before, html[dir="rtl"] .oj-fwk-icon-caret-end:before, html[dir="rtl"] .oj-conveyorbelt-overflow-icon.oj-end:before, html[dir="rtl"] .oj-filmstrip-arrow-icon.oj-end:before, html[dir="rtl"] .oj-navigationlist-collapsible .oj-navigationlist-collapse-icon:before, .oj-navigationlist-collapsible html[dir="rtl"] .oj-navigationlist-collapse-icon:before, html[dir="rtl"] .oj-navigationlist-slider .oj-navigationlist-collapse-icon:before, .oj-navigationlist-slider html[dir="rtl"] .oj-navigationlist-collapse-icon:before, html:not([dir="rtl"]) .oj-datepicker-prev-icon:before, html[dir="rtl"] .oj-datepicker-next-icon:before, .oj-fwk-icon-caret-n:before, .oj-conveyorbelt-overflow-icon.oj-top:before, .oj-filmstrip-arrow-icon.oj-top:before, html[dir="rtl"] .oj-fwk-icon-caret-start:before, html[dir="rtl"] .oj-conveyorbelt-overflow-icon.oj-start:before, html[dir="rtl"] .oj-filmstrip-arrow-icon.oj-start:before, html[dir="rtl"] .oj-navigationlist-previous-icon:before, html[dir="rtl"] .oj-hybrid-applayout-header-icon-back:before, html:not([dir="rtl"]) .oj-fwk-icon-caret-end:before, html:not([dir="rtl"]) .oj-conveyorbelt-overflow-icon.oj-end:before, html:not([dir="rtl"]) .oj-filmstrip-arrow-icon.oj-end:before, html:not([dir="rtl"]) .oj-navigationlist-collapsible .oj-navigationlist-collapse-icon:before, .oj-navigationlist-collapsible html:not([dir="rtl"]) .oj-navigationlist-collapse-icon:before, html:not([dir="rtl"]) .oj-navigationlist-slider .oj-navigationlist-collapse-icon:before, .oj-navigationlist-slider html:not([dir="rtl"]) .oj-navigationlist-collapse-icon:before, html[dir="rtl"] .oj-datepicker-prev-icon:before, html:not([dir="rtl"]) .oj-datepicker-next-icon:before {
  content: "\e605"; }

.oj-fwk-icon-caret-s:before, .oj-conveyorbelt-overflow-icon.oj-bottom:before, .oj-filmstrip-arrow-icon.oj-bottom:before, .oj-navigationlist-collapsible .oj-navigationlist-expand-icon:before {
  -webkit-transform: scale(-1, 1) rotate(90deg);
  transform: scale(-1, 1) rotate(90deg); }

.oj-fwk-icon-caret-w:before, html:not([dir="rtl"]) .oj-fwk-icon-caret-start:before, html:not([dir="rtl"]) .oj-conveyorbelt-overflow-icon.oj-start:before, html:not([dir="rtl"]) .oj-filmstrip-arrow-icon.oj-start:before, html:not([dir="rtl"]) .oj-navigationlist-previous-icon:before, html:not([dir="rtl"]) .oj-hybrid-applayout-header-icon-back:before, html[dir="rtl"] .oj-fwk-icon-caret-end:before, html[dir="rtl"] .oj-conveyorbelt-overflow-icon.oj-end:before, html[dir="rtl"] .oj-filmstrip-arrow-icon.oj-end:before, html[dir="rtl"] .oj-navigationlist-collapsible .oj-navigationlist-collapse-icon:before, .oj-navigationlist-collapsible html[dir="rtl"] .oj-navigationlist-collapse-icon:before, html[dir="rtl"] .oj-navigationlist-slider .oj-navigationlist-collapse-icon:before, .oj-navigationlist-slider html[dir="rtl"] .oj-navigationlist-collapse-icon:before, html:not([dir="rtl"]) .oj-datepicker-prev-icon:before, html[dir="rtl"] .oj-datepicker-next-icon:before {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.oj-fwk-icon-caret-n:before, .oj-conveyorbelt-overflow-icon.oj-top:before, .oj-filmstrip-arrow-icon.oj-top:before {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); }

.oj-fwk-icon-caret02-e:before, .oj-fwk-icon-caret02-s:before, .oj-pagingcontrol-nav-next-vertical-icon:before, .oj-fwk-icon-caret02-w:before, html:not([dir="rtl"]) .oj-fwk-icon-caret02-start:before, html[dir="rtl"] .oj-fwk-icon-caret02-end:before, html:not([dir="rtl"]) .oj-pagingcontrol-nav-previous-icon:before, html[dir="rtl"] .oj-pagingcontrol-nav-next-icon:before, .oj-fwk-icon-caret02-n:before, .oj-pagingcontrol-nav-previous-vertical-icon:before, html[dir="rtl"] .oj-fwk-icon-caret02-start:before, html:not([dir="rtl"]) .oj-fwk-icon-caret02-end:before, html[dir="rtl"] .oj-pagingcontrol-nav-previous-icon:before, html:not([dir="rtl"]) .oj-pagingcontrol-nav-next-icon:before {
  content: "\e606"; }

.oj-fwk-icon-caret02-s:before, .oj-pagingcontrol-nav-next-vertical-icon:before {
  -webkit-transform: scale(-1, 1) rotate(90deg);
  transform: scale(-1, 1) rotate(90deg); }

.oj-fwk-icon-caret02-w:before, html:not([dir="rtl"]) .oj-fwk-icon-caret02-start:before, html[dir="rtl"] .oj-fwk-icon-caret02-end:before, html:not([dir="rtl"]) .oj-pagingcontrol-nav-previous-icon:before, html[dir="rtl"] .oj-pagingcontrol-nav-next-icon:before {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.oj-fwk-icon-caret02-n:before, .oj-pagingcontrol-nav-previous-vertical-icon:before {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); }

.oj-fwk-icon-caret02end-e:before, .oj-fwk-icon-caret02end-s:before, .oj-pagingcontrol-nav-last-vertical-icon:before, .oj-fwk-icon-caret02end-w:before, html:not([dir="rtl"]) .oj-fwk-icon-caret02end-start:before, html[dir="rtl"] .oj-fwk-icon-caret02end-end:before, html:not([dir="rtl"]) .oj-pagingcontrol-nav-first-icon:before, html[dir="rtl"] .oj-pagingcontrol-nav-last-icon:before, .oj-fwk-icon-caret02end-n:before, .oj-pagingcontrol-nav-first-vertical-icon:before, html[dir="rtl"] .oj-fwk-icon-caret02end-start:before, html:not([dir="rtl"]) .oj-fwk-icon-caret02end-end:before, html[dir="rtl"] .oj-pagingcontrol-nav-first-icon:before, html:not([dir="rtl"]) .oj-pagingcontrol-nav-last-icon:before {
  content: "\e607"; }

.oj-fwk-icon-caret02end-s:before, .oj-pagingcontrol-nav-last-vertical-icon:before {
  -webkit-transform: scale(-1, 1) rotate(90deg);
  transform: scale(-1, 1) rotate(90deg); }

.oj-fwk-icon-caret02end-w:before, html:not([dir="rtl"]) .oj-fwk-icon-caret02end-start:before, html[dir="rtl"] .oj-fwk-icon-caret02end-end:before, html:not([dir="rtl"]) .oj-pagingcontrol-nav-first-icon:before, html[dir="rtl"] .oj-pagingcontrol-nav-last-icon:before {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.oj-fwk-icon-caret02end-n:before, .oj-pagingcontrol-nav-first-vertical-icon:before {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); }

.oj-fwk-icon-caret03-e:before, .oj-fwk-icon-caret03-s:before, .oj-fwk-icon-caret03-w:before, html:not([dir="rtl"]) .oj-fwk-icon-caret03-start:before, html[dir="rtl"] .oj-fwk-icon-caret03-end:before, html[dir="rtl"] .oj-menu-submenu-icon:before, html[dir="rtl"] .oj-listview-drill-icon:before, .oj-fwk-icon-caret03-n:before, html[dir="rtl"] .oj-fwk-icon-caret03-start:before, html:not([dir="rtl"]) .oj-fwk-icon-caret03-end:before, html:not([dir="rtl"]) .oj-menu-submenu-icon:before, html:not([dir="rtl"]) .oj-listview-drill-icon:before {
  content: "\e612"; }

.oj-fwk-icon-caret03-s:before {
  -webkit-transform: scale(-1, 1) rotate(90deg);
  transform: scale(-1, 1) rotate(90deg); }

.oj-fwk-icon-caret03-w:before, html:not([dir="rtl"]) .oj-fwk-icon-caret03-start:before, html[dir="rtl"] .oj-fwk-icon-caret03-end:before, html[dir="rtl"] .oj-menu-submenu-icon:before, html[dir="rtl"] .oj-listview-drill-icon:before {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.oj-fwk-icon-caret03-n:before {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); }

/* resizable */
/* --------------------------------------------------------------- */
.oj-resizable {
  position: relative; }

.oj-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  z-index: 900;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.oj-resizable-disabled .oj-resizable-handle,
.oj-resizable-autohide .oj-resizable-handle {
  display: none; }

.oj-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0; }

.oj-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0; }

.oj-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0;
  height: 100%; }

.oj-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%; }

.oj-resizable-se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  right: 1px;
  bottom: 1px; }

.oj-resizable-sw {
  cursor: sw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  bottom: -5px; }

.oj-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px; }

.oj-resizable-ne {
  cursor: ne-resize;
  width: 9px;
  height: 9px;
  right: -5px;
  top: -5px; }

.oj-panel {
  border: 1px solid #e7e7e9;
  background-color: #ffffff;
  border-radius: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0.5rem;
  position: relative; }

.oj-panel-alt1 {
  background-color: #f6f6f7;
  border-color: #c8c8c8; }

.oj-panel-alt2 {
  background-color: #dae9f5;
  border-color: #aed8fa; }

.oj-panel-alt3 {
  background-color: #fef9e8;
  border-color: #fef3ce; }

.oj-panel-alt4 {
  background-color: #ffe4e1;
  border-color: #ffcdc8; }

.oj-panel-alt5 {
  background-color: #e2e2e5;
  border-color: #c8c8c8; }

.oj-panel.oj-selected {
  border-color: #0572ce; }

.oj-hicontrast .oj-panel.oj-selected {
  border-width: 3px; }

.oj-panel-shadow-sm {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }

.oj-panel-shadow-md {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); }

.oj-panel-shadow-lg {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2); }

.oj-panel-drag-handle {
  text-align: center;
  vertical-align: middle;
  cursor: move;
  height: 20px;
  line-height: 20px;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem; }

.oj-panel-resize-button,
.oj-panel-remove-button,
.oj-panel-resize-button.oj-button,
.oj-panel-remove-button.oj-button {
  position: absolute;
  margin-bottom: 0;
  overflow: hidden;
  width: 2.25rem; }
  html:not([dir="rtl"]) .oj-panel-resize-button, html:not([dir="rtl"])
  .oj-panel-remove-button, html:not([dir="rtl"])
  .oj-panel-resize-button.oj-button, html:not([dir="rtl"])
  .oj-panel-remove-button.oj-button {
    right: 0; }
  html[dir="rtl"] .oj-panel-resize-button, html[dir="rtl"]
  .oj-panel-remove-button, html[dir="rtl"]
  .oj-panel-resize-button.oj-button, html[dir="rtl"]
  .oj-panel-remove-button.oj-button {
    left: 0; }

.oj-panel-resize-button {
  bottom: 0; }

.oj-panel-remove-button {
  top: 0; }

.oj-panel-resize-button .oj-panel-expand-icon.oj-end,
.oj-panel-resize-button .oj-panel-collapse-icon.oj-end,
.oj-panel-remove-button .oj-panel-remove-icon.oj-end {
  margin-left: auto;
  margin-right: auto; }

oj-collapsible:not(.oj-complete) {
  visibility: hidden; }

.oj-collapsible {
  margin-bottom: 10px;
  -webkit-tap-highlight-color: transparent; }

/* collapsible with "showDetail" style */
/* ------------------------------------*/
/*
     * this is the default style for collapsible header
     */
.oj-collapsible-header {
  display: block;
  position: relative;
  font-weight: bold;
  color: #3a3a3a;
  padding: 5px 0 3px 0;
  margin: 0; }

/*
     * this is the default style for collapsible content
     */
.oj-collapsible-content {
  color: #000;
  background-color: transparent;
  padding: 4px 0 0;
  margin: 0; }

/*
     * add more padding between header and collapsible content when header has a border
     */
.oj-header-border + .oj-collapsible-wrapper > .oj-collapsible-content {
  padding-top: 7px;
  padding-bottom: 4px; }

/*
     * specify sizes for h1 - h4 collapsible header
     */
h1.oj-collapsible-header {
  font-size: 1.75rem; }

h2.oj-collapsible-header {
  font-size: 1.5rem; }

h3.oj-collapsible-header {
  font-size: 1.25rem; }

h4.oj-collapsible-header {
  font-size: 1rem; }

/*
     * applied to the disabled collapsible header
     */
.oj-collapsible.oj-disabled > .oj-collapsible-header {
  color: #9e9e9e; }

/*
     * remove top padding for the first nested collapsible
     */
.oj-collapsible-content > .oj-collapsible:first-child > .oj-collapsible-header {
  padding-top: 0; }

/* collapsible content transition effects */
/* -------------------------------------- */
/*
     * transtion properties and duration
     */
.oj-collapsible-transition {
  transition: max-height 0.4s; }

/*
     * applied to the wrapper of the collapsible content.
     */
.oj-collapsible-wrapper {
  border: 0;
  padding: 0;
  margin: 0; }

/* suppress all browser decorations of anchors in the header */
/* --------------------------------------------------------- */
.oj-collapsible-header a,
.oj-collapsible-header a:active,
.oj-collapsible-header a:visited,
.oj-collapsible-header a:hover,
.oj-collapsible-header a:focus {
  text-decoration: none; }

/* disclosure icons for headers */
/* -----------------------------*/
.oj-collapsible-header-icon {
  padding: 5px 3px 5px 5px;
  outline-offset: -5px; }

.oj-collapsible-header-icon:focus {
  outline: none; }

.oj-collapsible-header-icon.oj-focus-highlight {
  outline: dotted 1px #000;
  outline: -webkit-focus-ring-color auto; }

/*
     * set hand cursor while over the clickable area
     */
.oj-collapsible-header.oj-hover,
.oj-collapsible-header-icon.oj-hover {
  cursor: pointer; }

/*
     * applied to the disclosure icon
     */
.oj-collapsible-header .oj-collapsible-header-icon,
.oj-collapsible-header .oj-collapsible-header-icon:hover {
  color: #878c90; }

/*
     * applied to the disclosure icon when it's hovered
     * add .oj-collapsible-header .oj-collapsible-header-icon.oj-hover
     * to override color set in a:hover.oj-clickable-icon-nocontext
     */
.oj-collapsible-header.oj-hover .oj-collapsible-header-icon,
.oj-collapsible-header .oj-collapsible-header-icon.oj-hover {
  color: #85bbe7; }

/*
     * applied to the disclosure icon when it's active
     */
.oj-collapsible-header.oj-active .oj-collapsible-header-icon,
.oj-collapsible-header .oj-collapsible-header-icon.oj-active {
  color: #0572ce; }

/*
     * For disabled headers
     */
.oj-collapsible.oj-disabled .oj-collapsible-header-icon {
  color: #878c90;
  opacity: 0.5; }

.oj-collapsible-header {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center; }

.oj-collapsible-header-icon {
  padding: 4px; }

.oj-collapsible-header a,
.oj-collapsible-header .oj-collapsible-header-icon {
  /*
       * For a basic collapsible (not in an accordion)
       * the closed font icon has some whitespace on the left side,
       * use a negative margin to move over the icon
       */ }
  html:not([dir="rtl"]) .oj-collapsible-header a, html:not([dir="rtl"])
  .oj-collapsible-header .oj-collapsible-header-icon {
    margin: 0 3px 0 -7px; }
  html[dir="rtl"] .oj-collapsible-header a, html[dir="rtl"]
  .oj-collapsible-header .oj-collapsible-header-icon {
    margin: 0 -7px 0 3px; }

html:not([dir="rtl"]) .oj-collapsible-content {
  padding-left: 20px; }

html[dir="rtl"] .oj-collapsible-content {
  padding-right: 20px; }

/* accordion */
/* --------------------------------------------------------------- */
oj-accordion:not(.oj-complete) {
  visibility: hidden; }

/*
     * applied to the disabled accordion header
     */
.oj-accordion-collapsible.oj-disabled > .oj-collapsible-header {
  color: #9e9e9e;
  background-image: none;
  background-color: #fafafa; }

/*
     * need to reset margin (bottom) here because it's being set in collapsible
     */
.oj-collapsible.oj-accordion-collapsible {
  margin: 0; }

/*
     * applied to the accordion header but not to any nested collapsible headers
     */
.oj-accordion-collapsible > .oj-collapsible-header {
  padding-top: 3px;
  padding-bottom: 3px;
  border: 0 solid #d5dfe5;
  border-width: 0 0 1px;
  font-size: 1.25rem;
  background-color: #f6f6f7; }

/*
     * need to restore top padding for the first nested collapsible,
     * because it's being reset in collapsible
     */
.oj-collapsible-content > .oj-accordion-collapsible.oj-collapsible:first-child > .oj-collapsible-header {
  padding-top: 3px; }

/*
     * need to reset margin because it's being set in collapsible to -7px
     */
.oj-accordion-collapsible > .oj-collapsible-header > .oj-collapsible-header-icon {
  padding: 9px;
  outline-offset: -9px; }
  html:not([dir="rtl"]) .oj-accordion-collapsible > .oj-collapsible-header > .oj-collapsible-header-icon {
    margin: 0; }
  html[dir="rtl"] .oj-accordion-collapsible > .oj-collapsible-header > .oj-collapsible-header-icon {
    margin: 0; }

/*
     * applied to the accordion content but not to any nested collapsible contents
     */
.oj-accordion-collapsible > .oj-collapsible-wrapper > .oj-collapsible-content {
  padding: 0.5rem; }

/*
     * border manipulation when top and bottom border present
     */
/* conveyorbelt */
/* --------------------------------------------------------------- */
oj-conveyor-belt:not(.oj-complete) {
  visibility: hidden; }

.oj-conveyorbelt {
  position: relative; }

.oj-conveyorbelt,
.oj-conveyorbelt-overflow-container,
.oj-conveyorbelt-content-container {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center; }

.oj-conveyorbelt.oj-conveyorbelt-vertical {
  display: -webkit-inline-flex;
  display: inline-flex; }

.oj-conveyorbelt.oj-conveyorbelt-vertical,
.oj-conveyorbelt.oj-conveyorbelt-vertical > .oj-conveyorbelt-overflow-container,
.oj-conveyorbelt.oj-conveyorbelt-vertical > .oj-conveyorbelt-overflow-container > .oj-conveyorbelt-content-container {
  -webkit-flex-direction: column;
  flex-direction: column; }

.oj-conveyorbelt-overflow-container {
  overflow: hidden;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto; }

.oj-conveyorbelt-content-container {
  position: relative;
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto; }

.oj-conveyorbelt-item {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

.oj-conveyorbelt-item.oj-navigationlist {
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto; }

/* overflow indicators */
.oj-conveyorbelt-overflow-indicator {
  box-sizing: border-box;
  width: 1.8125rem;
  height: 1.8125rem;
  line-height: 1.8125rem;
  text-align: center;
  cursor: default;
  border-radius: 2px;
  border: 1px solid;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  position: relative; }

.oj-conveyorbelt-overflow-indicator.oj-default {
  border-color: transparent; }

.oj-conveyorbelt-overflow-indicator.oj-hover {
  background-color: transparent;
  border-color: transparent; }

.oj-conveyorbelt-overflow-indicator.oj-active,
.oj-conveyorbelt-overflow-indicator.oj-active.oj-hover {
  background-color: transparent;
  border-color: transparent;
  opacity: 0.2; }

/* overflow icons */
.oj-conveyorbelt-overflow-indicator .oj-conveyorbelt-overflow-icon {
  cursor: inherit;
  vertical-align: middle;
  margin-bottom: 3px; }

.oj-conveyorbelt-overflow-indicator.oj-default .oj-conveyorbelt-overflow-icon {
  color: #0572ce; }

.oj-conveyorbelt-overflow-indicator.oj-hover .oj-conveyorbelt-overflow-icon {
  color: #85bae7; }

.oj-conveyorbelt-overflow-indicator.oj-active .oj-conveyorbelt-overflow-icon,
.oj-conveyorbelt-overflow-indicator.oj-active.oj-hover .oj-conveyorbelt-overflow-icon {
  color: #0572ce; }

/* filmstrip */
/* --------------------------------------------------------------- */
oj-film-strip:not(.oj-complete) {
  visibility: hidden; }

.oj-filmstrip {
  min-height: 1px;
  min-width: 1px;
  overflow: hidden; }

.oj-filmstrip-container {
  position: relative;
  display: -webkit-flex;
  display: flex; }

.oj-filmstrip-vertical.oj-filmstrip-container,
.oj-filmstrip-vertical .oj-filmstrip-container {
  -webkit-flex-direction: column;
  flex-direction: column; }

.oj-filmstrip-content-container {
  overflow: hidden; }

.oj-filmstrip-pages-container,
.oj-filmstrip-page,
.oj-filmstrip-content-container {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 0;
  flex-shrink: 0; }

.oj-filmstrip-item-container {
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-around;
  justify-content: space-around; }

.oj-filmstrip-item {
  -webkit-flex-grow: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0; }

.oj-filmstrip-transition {
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

html:not([dir="rtl"]) .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-next-oldpage-to, html:not([dir="rtl"])
.oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-next-newpage-to {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0); }

html[dir="rtl"] .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-next-oldpage-to, html[dir="rtl"]
.oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-next-newpage-to {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0); }

html:not([dir="rtl"]) .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-prev-oldpage-to, html:not([dir="rtl"])
.oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-prev-newpage-to {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0); }

html[dir="rtl"] .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-prev-oldpage-to, html[dir="rtl"]
.oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-prev-newpage-to {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0); }

.oj-filmstrip.oj-filmstrip-vertical .oj-filmstrip-transition-next-oldpage-to,
.oj-filmstrip.oj-filmstrip-vertical .oj-filmstrip-transition-next-newpage-to {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0); }

.oj-filmstrip.oj-filmstrip-vertical .oj-filmstrip-transition-prev-oldpage-to,
.oj-filmstrip.oj-filmstrip-vertical .oj-filmstrip-transition-prev-newpage-to {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0); }

/* navigation arrows */
.oj-filmstrip-arrow-container {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-grow: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-align-self: center;
  align-self: center; }

.oj-filmstrip-vertical .oj-filmstrip-arrow-container {
  -webkit-flex-direction: column;
  flex-direction: column; }

.oj-filmstrip-arrow-container-overlay {
  position: absolute; }

html:not([dir="rtl"]) .oj-filmstrip-arrow-container-overlay.oj-start {
  left: 0; }

html[dir="rtl"] .oj-filmstrip-arrow-container-overlay.oj-start {
  right: 0; }

html:not([dir="rtl"]) .oj-filmstrip-arrow-container-overlay.oj-end {
  right: 0; }

html[dir="rtl"] .oj-filmstrip-arrow-container-overlay.oj-end {
  left: 0; }

.oj-filmstrip-arrow-container-overlay.oj-start,
.oj-filmstrip-arrow-container-overlay.oj-end {
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0); }

.oj-filmstrip-arrow-container-overlay.oj-top {
  top: 0; }

.oj-filmstrip-arrow-container-overlay.oj-bottom {
  bottom: 0; }

html:not([dir="rtl"]) .oj-filmstrip-arrow-container-overlay.oj-top, html:not([dir="rtl"])
.oj-filmstrip-arrow-container-overlay.oj-bottom {
  left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0); }

html[dir="rtl"] .oj-filmstrip-arrow-container-overlay.oj-top, html[dir="rtl"]
.oj-filmstrip-arrow-container-overlay.oj-bottom {
  right: 50%;
  -webkit-transform: translate3d(50%, 0, 0);
  transform: translate3d(50%, 0, 0); }

.oj-filmstrip-arrow {
  box-sizing: border-box;
  width: 1.8125rem;
  height: 1.8125rem;
  line-height: 1.8125rem;
  text-align: center;
  cursor: default;
  border-radius: 2px;
  border: 1px solid;
  display: inline-block;
  opacity: 1;
  outline: none; }

.oj-filmstrip-arrow.oj-default {
  border-color: transparent; }

.oj-filmstrip-arrow.oj-hover {
  background-color: transparent;
  border-color: transparent; }

.oj-filmstrip-arrow.oj-active,
.oj-filmstrip-arrow.oj-active.oj-hover {
  background-color: transparent;
  border-color: transparent;
  opacity: 0.2; }

/* navigation arrow icons */
.oj-filmstrip-arrow .oj-filmstrip-arrow-icon {
  cursor: inherit;
  vertical-align: middle;
  margin-bottom: 3px; }

.oj-filmstrip-arrow.oj-default .oj-filmstrip-arrow-icon {
  color: #0572ce; }

.oj-filmstrip-arrow.oj-hover .oj-filmstrip-arrow-icon {
  color: #85bae7; }

.oj-filmstrip-arrow.oj-active .oj-filmstrip-arrow-icon,
.oj-filmstrip-arrow.oj-active.oj-hover .oj-filmstrip-arrow-icon {
  color: #0572ce; }

.oj-filmstrip-arrow-transition {
  transition: opacity 0.2s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.oj-filmstrip.oj-filmstrip-hover .oj-filmstrip-arrow-transition.oj-filmstrip-arrow-container {
  opacity: 1; }

.oj-filmstrip.oj-filmstrip-hover .oj-filmstrip-arrow-transition.oj-filmstrip-arrow {
  opacity: 1; }

.oj-filmstrip:not(.oj-filmstrip-hover) .oj-filmstrip-arrow-transition {
  opacity: 0; }

/* masonrylayout */
/* --------------------------------------------------------------- */
oj-masonry-layout:not(.oj-complete) {
  visibility: hidden; }

.oj-masonrylayout {
  min-height: 1px;
  min-width: 1px;
  position: relative; }

.oj-masonrylayout-transition-resize-to {
  transition: width 0.4s, height 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.oj-masonrylayout-transition-resize-to-fast {
  transition: width 0.2s, height 0.2s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

/* masonry tile */
.oj-masonrylayout-tile-transition-move-to {
  transition: top 0.4s, left 0.4s, right 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.oj-masonrylayout-tile-transition-move-to-fast {
  transition: top 0.2s, left 0.2s, right 0.2s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.oj-masonrylayout-tile-transition-resize-to {
  transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s, right 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.oj-masonrylayout-tile-transition-hide-from {
  opacity: 1; }

.oj-masonrylayout-tile-transition-hide-to {
  transition: opacity 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  opacity: 0; }

.oj-masonrylayout-tile-transition-show-from {
  opacity: 0; }

.oj-masonrylayout-tile-transition-show-to {
  transition: opacity 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  opacity: 1; }

.oj-masonrylayout-tile-1x1, .oj-masonrylayout-tile-1x2, .oj-masonrylayout-tile-1x3, .oj-masonrylayout-tile-2x1, .oj-masonrylayout-tile-2x2, .oj-masonrylayout-tile-2x3, .oj-masonrylayout-tile-3x1, .oj-masonrylayout-tile-3x2 {
  box-sizing: border-box;
  margin: 5px;
  position: absolute; }

.oj-masonrylayout-tile-1x1.oj-drop, .oj-masonrylayout-tile-1x2.oj-drop, .oj-masonrylayout-tile-1x3.oj-drop, .oj-masonrylayout-tile-2x1.oj-drop, .oj-masonrylayout-tile-2x2.oj-drop, .oj-masonrylayout-tile-2x3.oj-drop, .oj-masonrylayout-tile-3x1.oj-drop, .oj-masonrylayout-tile-3x2.oj-drop {
  background-color: #D9F4FA;
  border: 1px solid #c2eaf3;
  opacity: .75; }

.oj-masonrylayout-tile-1x1.oj-drag, .oj-masonrylayout-tile-1x2.oj-drag, .oj-masonrylayout-tile-1x3.oj-drag, .oj-masonrylayout-tile-2x1.oj-drag, .oj-masonrylayout-tile-2x2.oj-drag, .oj-masonrylayout-tile-2x3.oj-drag, .oj-masonrylayout-tile-3x1.oj-drag, .oj-masonrylayout-tile-3x2.oj-drag {
  opacity: .75; }

.oj-masonrylayout-tile-1x1 {
  width: 150px;
  height: 150px; }

.oj-masonrylayout-tile-1x2 {
  width: 150px;
  height: 310px; }

.oj-masonrylayout-tile-1x3 {
  width: 150px;
  height: 470px; }

.oj-masonrylayout-tile-2x1 {
  width: 310px;
  height: 150px; }

.oj-masonrylayout-tile-2x2 {
  width: 310px;
  height: 310px; }

.oj-masonrylayout-tile-2x3 {
  width: 310px;
  height: 470px; }

.oj-masonrylayout-tile-3x1 {
  width: 470px;
  height: 150px; }

.oj-masonrylayout-tile-3x2 {
  width: 470px;
  height: 310px; }

/* tabs */
/* --------------------------------------------------------------- */
oj-tabs:not(.oj-complete) {
  visibility: hidden; }

/*
     * applied to the tabs
     */
.oj-tabs {
  position: relative;
  font-size: 1rem; }

/*
     * use flexbox so that vertial tabs automatically lay out correctly on resize
     */
.oj-tabs.oj-tabs-vertical {
  display: -webkit-flex;
  display: flex; }

/*
     * applied to the tab bar
     */
.oj-tabs-nav {
  white-space: nowrap;
  margin: 0;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.oj-tabs-tab:focus {
  outline: none; }

.oj-tabs-tab.oj-focus-highlight {
  outline: dotted 1px #000;
  outline: -webkit-focus-ring-color auto; }

/*
     * applied to a tab when it's selected
     */
.oj-tabs-tab.oj-selected {
  background-color: #ffffff; }

.oj-tabs,
.oj-tabs-tab .oj-tabs-close-icon,
.oj-tabs-tab .oj-tabs-anchor {
  -webkit-tap-highlight-color: transparent; }

.oj-tabs-tab a:active {
  background-color: transparent; }

/*
     * applied to the tab header
     */
.oj-tabs-anchor {
  cursor: pointer;
  outline: none;
  display: inline-block;
  padding: .55rem .85rem .65rem .85rem;
  vertical-align: middle; }

/*
     * applied to the tab title text
     * display inline so the close icon is aligned with the title text
     */
.oj-tabs-title {
  display: inline-block;
  min-width: 1rem;
  line-height: 1rem;
  vertical-align: middle;
  font-weight: normal;
  color: #0572ce;
  text-decoration: none; }

/*
     * applied to the tab title text when it's overflow
     */
.oj-tabs-title-overflow {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }

/*
     * applied to the tab anchor when it's disabled
     */
.oj-tabs-tab.oj-disabled .oj-tabs-anchor {
  cursor: text;
  text-decoration: none; }

/* suppress all browser decorations of anchors in the tab */
.oj-tabs-tab a,
.oj-tabs-tab a:active,
.oj-tabs-tab a:visited,
.oj-tabs-tab a:hover,
.oj-tabs-tab a:focus {
  text-decoration: none; }

/*
     * applied to the icon font in the tab title

    .oj-tabs-tab-icon {
      @extend .oj-clickable-icon;
    }
     */
/*
     * applied to the icon font in the tab title and close icon
     * add .oj-tabs-tab .oj-tabs-close-icon:hover to 
     * override color set in a:hover.oj-clickable-icon-nocontext
     */
.oj-tabs-tab .oj-tabs-tab-icon,
.oj-tabs-tab .oj-tabs-close-icon,
.oj-tabs-tab .oj-tabs-close-icon:hover {
  color: #878c90; }

/*
     * applied to the icon font in the tab title and close icon when hovered
     */
.oj-tabs-tab.oj-hover .oj-tabs-tab-icon,
.oj-tabs-tab .oj-tabs-close-icon.oj-hover {
  color: #85bbe7; }

/*
     * applied to the icon font in the tab title and close icon when active
     */
.oj-tabs-tab.oj-active .oj-tabs-tab-icon,
.oj-tabs-tab .oj-tabs-close-icon.oj-active {
  color: #0572ce; }

/*
     * applied to the icon font in the tab title and close icon when selected
     */
.oj-tabs-tab.oj-selected .oj-tabs-tab-icon {
  color: #0572ce; }

/*
     * applied to the icon font in the tab title and close icon when disabled
     */
.oj-tabs-tab.oj-disabled .oj-tabs-tab-icon {
  color: #878c90;
  opacity: 0.5; }

/*
     * applied to the horizontal tab
     * need to set overflow-x to hidden to avoid the scrollbar from showing up
     * temporarily while adding a new tab.
     */
.oj-tabs-horizontal.oj-tabs {
  overflow-x: hidden; }

.oj-tabs-horizontal > .oj-tabs-nav-root .oj-tabs-tab {
  display: inline-block;
  position: relative; }

/*
     * applied to the tab placeholder created when reordering
     */
.oj-tabs-horizontal > .oj-tabs-nav-root .oj-tabs-tab.ui-sortable-placeholder {
  margin-bottom: -1rem; }

.oj-tabs-horizontal.oj-tabs-bottom > .oj-tabs-nav-root .oj-tabs-tab.ui-sortable-placeholder {
  margin-top: -1rem; }

/* 
     * Bug 18283133 - ER for placing buttons alongside tabs
     */
/*
     * For the facet after the tab bar, grow but no shrink when resized
     */
.oj-tabs-facet {
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto; }

/*
     * For the facet before the tab bar, no grow or shrink when resized
     */
.oj-tabs-facet.oj-start {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

/*
     * For the conveyor belt, set flex-basis in JS
     * set min-width to allow the content to be shrunk smaller than its content size
     */
.oj-tabs-conveyorbelt-wrapper {
  min-width: 1px; }

/*
     * Use flex layout only if the tab bar contains any facets
     */
.oj-tabs-horizontal > .oj-tabs-nav-root:not(.oj-conveyorbelt) {
  display: -webkit-flex;
  display: flex; }

/*
     * Container of the horizontal tab bar
     */
.oj-tabs-conveyor {
  display: inline-block; }

/*
     * applied to the conveyorbelt buttons
     */
html:not([dir="rtl"]) .oj-tabs-nav-root .oj-conveyorbelt-overflow-indicator.oj-start {
  margin-right: 5px; }

html[dir="rtl"] .oj-tabs-nav-root .oj-conveyorbelt-overflow-indicator.oj-start {
  margin-left: 5px; }

html:not([dir="rtl"]) .oj-tabs-nav-root .oj-conveyorbelt-overflow-indicator.oj-end {
  margin-left: 5px; }

html[dir="rtl"] .oj-tabs-nav-root .oj-conveyorbelt-overflow-indicator.oj-end {
  margin-right: 5px; }

/*
     * applied to the panel body
     */
.oj-tabs-panel {
  display: block;
  padding: 0.5rem;
  color: #000;
  background-color: #ffffff; }

/* vertical tabs */
/* --------------------------------------------------------------- */
/*
     * applied to the vertical tab bar
     */
.oj-tabs-vertical > .oj-tabs-nav-root {
  margin: 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  position: relative;
  white-space: nowrap; }

/*
     * applied to the vertical tab
     */
.oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab {
  list-style: none;
  position: relative;
  top: 0;
  margin: 0;
  white-space: nowrap; }

/*
     * apply to the selected tab
     */
html:not([dir="rtl"]) .oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  margin-right: -1px; }

html[dir="rtl"] .oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  margin-left: -1px; }

html:not([dir="rtl"]) .oj-tabs-vertical.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  margin-right: 0;
  margin-left: -1px; }

html[dir="rtl"] .oj-tabs-vertical.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  margin-left: 0;
  margin-right: -1px; }

/*
     * applied to the body of vertical tabs
     */
.oj-tabs-vertical > .oj-tabs-panel {
  margin-top: 0;
  -webkit-flex: 1 1;
  flex: 1 1;
  min-width: 0;
  min-height: 0; }

/* Tabs with the oj-tabs-icon-only class specified */
/* --------------------------------------------------------------- */
/* 
     * override background setting in 
     * .oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab
     */
.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab.oj-selected,
.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab.oj-selected.oj-hover,
.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab.oj-selected,
.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab.oj-selected.oj-hover {
  background-color: #ffffff;
  background-image: none; }

.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-close-icon {
  padding-top: 4px; }

.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-anchor {
  padding: 0.68rem; }

.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-anchor {
  padding: 0.7rem 0.6rem 0.7rem 0.6rem; }

/*
     * applied to the vertical tabs with icon only in the tab header
     */
.oj-tabs-vertical.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-anchor {
  padding: 0.68rem 0.6rem 0.68rem 0.6rem; }

/*
     * applied to the vertical tabs with text and icon in the tab header
     */
.oj-tabs-vertical.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-anchor {
  padding: 0.8rem 0.6rem 0.8rem 0.6rem; }

/*
     * applied to the tab bar
     */
.oj-tabs-nav {
  padding: 0;
  border: 0; }

/*
     * applied to each tab 
     */
.oj-tabs-tab {
  border-color: transparent;
  border-style: solid; }

/*
     * applied to a selected tab
     */
.oj-tabs-tab.oj-selected {
  border-color: #0572ce; }

/*
     * applied to the selected tab icon, needed for icon font icons
     */
.oj-tabs-tab.oj-selected .oj-tabs-tab-icon {
  font-weight: normal; }

/*
     * applied to the tab title when it's hovered
     */
.oj-tabs-tab.oj-hover .oj-tabs-title {
  text-decoration: underline; }

.oj-tabs-tab.oj-hover .oj-tabs-tab-icon {
  text-decoration: none; }

/*
     * applied to the tab title text when it's disabled
     */
.oj-tabs-tab.oj-disabled .oj-tabs-title {
  color: #9e9e9e; }

/*
     * applied to the tab content
     */
.oj-tabs-tab-content {
  white-space: nowrap;
  border-color: transparent;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  border-radius: 0 0 0 0; }

/*
     * used to display the left and right borders of the selected tab
     */
.oj-tabs-tab.oj-selected .oj-tabs-tab-content {
  border-color: #c8c8c8; }

/*
     * applied to the horizontal tab when it is selected
     */
.oj-tabs-horizontal > .oj-tabs-nav-root .oj-tabs-tab-content,
.oj-tabs-horizontal.oj-tabs-bottom > .oj-tabs-nav-root .oj-tabs-tab-content {
  border-width: 0 1px 0 1px; }

/*
     * applied to a horizontal tab
     */
.oj-tabs-horizontal > .oj-tabs-nav-root .oj-tabs-tab {
  top: 0;
  margin: 0;
  border-width: 3px 0 0 0;
  border-radius: 0 0 0 0; }

/*
     * applied to a horizontal tab when edge = bottom
     */
.oj-tabs-horizontal.oj-tabs-bottom > .oj-tabs-nav-root .oj-tabs-tab {
  border-width: 0 0 3px 0; }

.oj-tabs-horizontal.oj-tabs-text-icon.oj-tabs-bottom > .oj-tabs-nav-root .oj-tabs-tab,
.oj-tabs-horizontal.oj-tabs-icon-only.oj-tabs-bottom > .oj-tabs-nav-root .oj-tabs-tab {
  border-width: 0 0 1px 0; }

/*
     * In alta horizontal tabs
     * make the start border on the first selected tab match the container
     */
html:not([dir="rtl"]) .oj-first-child-selected > .oj-tabs-nav-root .oj-tabs-tab.oj-selected .oj-tabs-tab-content {
  border-left-color: #e7e7e9; }

html[dir="rtl"] .oj-first-child-selected > .oj-tabs-nav-root .oj-tabs-tab.oj-selected .oj-tabs-tab-content {
  border-right-color: #e7e7e9; }

/* close icon for tabs */
/* -----------------------------*/
/*
     * close icon style
     */
.oj-tabs-close-icon {
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  width: 1.84rem;
  line-height: 2.2rem; }
  html:not([dir="rtl"]) .oj-tabs-close-icon {
    margin-left: -0.75rem; }
  html[dir="rtl"] .oj-tabs-close-icon {
    margin-right: -0.75rem; }

/*
     * applied to the panel body
     */
.oj-tabs-panel {
  border: 1px solid #e7e7e9;
  border-radius: 5px;
  margin-top: -1px; }

/*
     * applied to the panel body when edge = bottom
     */
.oj-tabs-bottom > .oj-tabs-panel {
  margin-top: 0;
  margin-bottom: -1px; }

/*
     * don't apply top left border radius when the 1st tab is selected
     */
html:not([dir="rtl"]) .oj-first-child-selected > .oj-tabs-panel {
  border-top-left-radius: 0; }

html[dir="rtl"] .oj-first-child-selected > .oj-tabs-panel {
  border-top-right-radius: 0; }

/*
     * applied to the panel body when 1st tab is selected and edge = bottom
     */
html:not([dir="rtl"]) .oj-tabs-bottom.oj-first-child-selected > .oj-tabs-panel {
  border-bottom-left-radius: 0; }

html[dir="rtl"] .oj-tabs-bottom.oj-first-child-selected > .oj-tabs-panel {
  border-bottom-right-radius: 0; }

/* vertical tabs */
/* --------------------------------------------------------------- */
/*
     * applied to the vertical tab bar
     */
.oj-tabs-vertical > .oj-tabs-nav-root {
  padding: 15px 0 0; }

/*
     * applied to the vertical tab
     */
.oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab {
  line-height: 1rem; }
  html:not([dir="rtl"]) .oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab {
    border-width: 0 0 0 3px;
    border-radius: 0 0 0 0; }
  html[dir="rtl"] .oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab {
    border-width: 0 3px 0 0;
    border-radius: 0 0 0 0; }

/*
     * applied to the vertical tab when edge = end
     */
html[dir="rtl"] .oj-tabs-vertical.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab {
  border-width: 0 0 0 3px;
  border-radius: 0 0 0 0; }

html:not([dir="rtl"]) .oj-tabs-vertical.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab {
  border-width: 0 3px 0 0;
  border-radius: 0 0 0 0; }

html:not([dir="rtl"]) .oj-tabs-vertical.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab, html:not([dir="rtl"])
.oj-tabs-vertical.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab {
  border-width: 1px; }

html[dir="rtl"] .oj-tabs-vertical.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab, html[dir="rtl"]
.oj-tabs-vertical.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab {
  border-width: 1px; }

/*
     * applied to the vertical tab
     */
.oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab-content {
  border-width: 1px 0 1px 0; }
  html:not([dir="rtl"]) .oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab-content {
    border-radius: 0 0 0 0; }
  html[dir="rtl"] .oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab-content {
    border-radius: 0 0 0 0; }

/*
     * applied to the vertical tab header
     */
.oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-anchor {
  padding: 1.1rem 0.8rem 1.1rem 0.8rem; }

/* Tabs with the oj-tabs-icon-only class specified */
/* --------------------------------------------------------------- */
.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab,
.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab {
  border-width: 1px;
  border-radius: 0; }

.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab-content,
.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab-content {
  border-width: 0;
  border-radius: 0; }

.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab.oj-selected,
.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  border-color: #e7e7e9; }

/* vertical tabs with the oj-tabs-icon-only class specified */
/* --------------------------------------------------------------- */
/*
     * display top, bottom and left border and border radius on the selected tab
     */
html:not([dir="rtl"]) .oj-tabs-vertical.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab.oj-selected, html:not([dir="rtl"])
.oj-tabs-vertical.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  border-radius: 3px 0 0 3px;
  border-right-color: transparent; }

html[dir="rtl"] .oj-tabs-vertical.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab.oj-selected, html[dir="rtl"]
.oj-tabs-vertical.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  border-radius: 0 3px 3px 0;
  border-left-color: transparent; }

/*
     * display top, bottom and right border and border radius on the selected tab 
     * when edge = end
     */
html:not([dir="rtl"]) .oj-tabs-vertical.oj-tabs-text-icon.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab.oj-selected, html:not([dir="rtl"])
.oj-tabs-vertical.oj-tabs-icon-only.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  border-radius: 0 3px 3px 0;
  border-color: #e7e7e9;
  margin-left: -1px;
  border-left-color: transparent; }

html[dir="rtl"] .oj-tabs-vertical.oj-tabs-text-icon.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab.oj-selected, html[dir="rtl"]
.oj-tabs-vertical.oj-tabs-icon-only.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  border-radius: 3px 0 0 3px;
  border-color: #e7e7e9;
  margin-right: -1px;
  border-right-color: transparent; }

/* horizontal tabs with the oj-tabs-icon-only class specified */
/* --------------------------------------------------------------- */
/*
     * display top, right and left border and border radius on the selected tab
     */
.oj-tabs-horizontal.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab.oj-selected,
.oj-tabs-horizontal.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  border-bottom-color: transparent;
  border-radius: 3px 3px 0 0; }

.oj-tabs-horizontal.oj-tabs-text-icon.oj-tabs-bottom > .oj-tabs-nav-root .oj-tabs-tab.oj-selected,
.oj-tabs-horizontal.oj-tabs-icon-only.oj-tabs-bottom > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  border-color: #e7e7e9;
  border-top-color: transparent;
  border-radius: 0 0 3px 3px; }

/* train */
/* --------------------------------------------------------------- */
oj-train:not(.oj-complete) {
  visibility: hidden; }

.oj-train {
  white-space: nowrap;
  text-align: center; }

.oj-train-wrapper {
  font-size: 0;
  display: inline-block;
  position: relative;
  vertical-align: top; }

/* Class that can be added to stretch train to container size */
.oj-train-stretch .oj-train-wrapper {
  width: 100%; }

/* Connector circle behind the individual step buttons which matches the connector */
.oj-train-button-connector {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-block;
  border-radius: 50%;
  box-sizing: border-box; }

.oj-train-button-connector.oj-train-fill {
  background-color: transparent;
  background-image: none;
  top: 0; }

.oj-train-step-individual-connector {
  position: relative;
  visibility: visible;
  height: 1px;
  width: calc(100% - 24px - 20px);
  top: 12px;
  background-color: #c8c8c8; }
  html:not([dir="rtl"]) .oj-train-step-individual-connector {
    left: calc(50% + 12px + 10px); }
  html[dir="rtl"] .oj-train-step-individual-connector {
    right: calc(50% + 12px + 10px); }

/* Inividual step buttons that are used for train navigation */
.oj-train-button {
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  width: 24px;
  height: 24px; }

.oj-train-button.oj-default {
  border-color: #878c90;
  background-color: #878c90; }

.oj-train-button.oj-visited {
  border-color: #0572ce;
  background-color: #0572ce; }

.oj-train-button.oj-hover {
  border-color: #85bbe7;
  background-color: #85bbe7; }

.oj-train-button.oj-selected {
  border-color: #0572ce;
  background-color: #0572ce;
  cursor: default; }

.oj-train-button.oj-disabled {
  border-color: #c8c8c8;
  background-color: #c8c8c8;
  cursor: default; }

.oj-train-button.oj-active,
.oj-train-button.oj-hover.oj-active {
  background-color: #daeaf8;
  border-color: #0572ce; }

.oj-train-step-list-item.oj-confirmation .oj-train-button,
.oj-train-step-list-item.oj-info .oj-train-button,
.oj-train-step-list-item.oj-invalid .oj-train-button,
.oj-train-step-list-item.oj-warning .oj-train-button {
  background-color: transparent;
  border-color: transparent; }

.oj-train-button-text {
  font-size: 12px;
  font-weight: normal;
  color: #ffffff; }

.oj-train-button.oj-active .oj-train-button-text,
.oj-train-button.oj-hover.oj-active .oj-train-button-text,
.oj-train-button.oj-hover.oj-visited.oj-active .oj-train-button-text {
  color: #0572ce; }

.oj-train-button.oj-disabled .oj-train-button-text {
  color: #ffffff; }

.oj-train-button.oj-hover .oj-train-button-text,
.oj-train-button.oj-visited.oj-hover .oj-train-button-text {
  color: #ffffff; }

.oj-train-button.oj-visited .oj-train-button-text {
  color: #ffffff; }

.oj-train-button.oj-selected .oj-train-button-text {
  color: #ffffff; }

.oj-train-step-list {
  margin: 0;
  padding: 0; }

/* Class for each li that stores the label and button information for each step in the train */
.oj-train-step-list-item {
  font-size: 1rem;
  width: 7rem;
  text-align: center;
  display: inline-block;
  white-space: nowrap;
  vertical-align: top; }

.oj-train-label-wrapper {
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 14px; }

.oj-train-label {
  text-decoration: none;
  margin-right: 5px;
  margin-left: 5px;
  color: #595959;
  text-align: center; }

.oj-train-label.oj-visited {
  color: #595959; }

.oj-train-label.oj-disabled {
  text-decoration: none;
  font-weight: normal;
  color: #000;
  opacity: 0.5; }

.oj-train-label.oj-active,
.oj-train-label.oj-hover.oj-active {
  text-decoration: none;
  font-weight: bold;
  cursor: pointer; }

.oj-train-label.oj-hover {
  cursor: pointer; }

.oj-train-label.oj-selected {
  text-decoration: none;
  cursor: default;
  font-weight: bold; }

.oj-train-icon, .oj-train-icon.oj-confirmation, .oj-train-icon.oj-error, .oj-train-icon.oj-info, .oj-train-icon.oj-warning {
  position: absolute;
  aria-hidden: true;
  bottom: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 14px;
  border-radius: 50%;
  color: #ffffff;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid; }
  html:not([dir="rtl"]) .oj-train-icon {
    right: 0; }
  html[dir="rtl"] .oj-train-icon, html[dir="rtl"] .oj-train-icon.oj-confirmation, html[dir="rtl"] .oj-train-icon.oj-error, html[dir="rtl"] .oj-train-icon.oj-info, html[dir="rtl"] .oj-train-icon.oj-warning {
    left: 0; }

.oj-confirmation.oj-train-icon {
  background-color: #878c90;
  border-color: #878c90; }

.oj-train-button.oj-disabled .oj-train-icon {
  background-color: #c8c8c8;
  border-color: #c8c8c8; }

.oj-train-button.oj-hover .oj-train-icon,
.oj-train-button.oj-visited.oj-hover .oj-train-icon,
.oj-train-button.oj-visited.oj-hover .oj-confirmation.oj-train-icon,
.oj-train-button.oj-visited.oj-hover .oj-error.oj-train-icon,
.oj-train-button.oj-visited.oj-hover .oj-info.oj-train-icon,
.oj-train-button.oj-visited.oj-hover .oj-warning.oj-train-icon {
  background-color: #85bbe7;
  border-color: #85bbe7; }

.oj-train-button.oj-visited .oj-confirmation.oj-train-icon,
.oj-train-button.oj-selected .oj-confirmation.oj-train-icon {
  background-color: #0572ce;
  border-color: #0572ce; }

.oj-train-button.oj-active .oj-confirmation.oj-train-icon,
.oj-train-button.oj-hover.oj-active .oj-confirmation.oj-train-icon,
.oj-train-button.oj-hover.oj-visited.oj-active .oj-confirmation.oj-train-icon {
  background-color: #daeaf8;
  color: #0572ce;
  border-color: #0572ce; }

.oj-train-button.oj-visited .oj-error.oj-train-icon,
.oj-train-button.oj-selected .oj-error.oj-train-icon {
  background-color: #e31e26;
  border-color: #e31e26; }

.oj-train-button.oj-active .oj-error.oj-train-icon,
.oj-train-button.oj-hover.oj-active .oj-error.oj-train-icon,
.oj-train-button.oj-hover.oj-visited.oj-active .oj-error.oj-train-icon {
  background-color: #ffdfdf;
  color: #e31e26;
  border-color: #e31e26; }

.oj-info.oj-train-icon {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }

.oj-train-button.oj-visited .oj-info.oj-train-icon,
.oj-train-button.oj-selected .oj-info.oj-train-icon {
  background-color: #0572ce;
  border-color: #0572ce; }

.oj-train-button.oj-active .oj-info.oj-train-icon,
.oj-train-button.oj-hover.oj-active .oj-info.oj-train-icon,
.oj-train-button.oj-hover.oj-visited.oj-active .oj-info.oj-train-icon {
  background-color: #daeaf8;
  color: #0572ce;
  border-color: #0572ce; }

.oj-warning.oj-train-icon {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }

.oj-train-button.oj-visited .oj-warning.oj-train-icon,
.oj-train-button.oj-selected .oj-warning.oj-train-icon {
  background-color: #f6c018;
  border-color: #f6c018; }

.oj-train-button.oj-active .oj-warning.oj-train-icon,
.oj-train-button.oj-hover.oj-active .oj-warning.oj-train-icon,
.oj-train-button.oj-hover.oj-visited.oj-active .oj-warning.oj-train-icon {
  background-color: #fff2de;
  color: #f6c018;
  border-color: #f6c018; }

.oj-train-icon.oj-hover {
  cursor: pointer; }

.oj-hicontrast .oj-train-button.oj-selected {
  border-width: 12px; }

.oj-hicontrast .oj-train-button.oj-disabled {
  border-style: dotted; }

.oj-hicontrast .oj-train-button.oj-visited {
  border-width: 2px; }

.oj-hicontrast .oj-train-connector {
  border: 1px solid; }

.oj-hicontrast .oj-train-connector-fill {
  border: 0.5px solid; }

/* button */
/* --------------------------------------------------------------- */
oj-button:not(.oj-complete) {
  visibility: hidden; }

oj-toggle-button:not(.oj-complete) {
  visibility: hidden; }

.oj-button {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-justify-content: center;
  justify-content: center;
  min-width: 0;
  -webkit-align-items: center;
  align-items: center;
  vertical-align: middle;
  padding: 0;
  border: 1px solid;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 2px;
  box-sizing: border-box;
  height: 2.25rem;
  font-size: 1.063rem;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent; }

html body .oj-button {
  cursor: default; }

input.oj-button[type="button"],
input.oj-button[type="submit"],
input.oj-button[type="reset"] {
  display: inline-block; }

/* The root element of toggle (radio and checkbox) buttons */
.oj-button-toggle {
  position: relative; }

/* The <label> of toggle (radio and checkbox) buttons or <div> of <button> type buttons*/
.oj-button-label {
  cursor: inherit;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  height: 100%; }

/* The <input> of toggle (radio and checkbox) buttons */
.oj-button-input {
  left: 0;
  top: 0; }

/* "oj-button-icon oj-start" is applied to the button's start icon, if any.  
       "oj-button-icon oj-end" is applied to the button's end icon, if any.  */
.oj-button .oj-button-icon {
  font-weight: normal;
  text-shadow: none; }

.oj-button .oj-button-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.oj-button-sm.oj-button {
  height: 1.5615rem;
  line-height: 1.5615rem;
  font-size: 0.875rem; }

.oj-button-lg.oj-button {
  height: 2.49975rem;
  line-height: 2.49975rem;
  font-size: 1.125rem; }

.oj-button-xl.oj-button {
  height: 2.925rem;
  line-height: 2.925rem;
  font-size: 1.25rem; }

.oj-button,
.oj-button:link,
.oj-button:visited,
.oj-button:hover,
.oj-button:active {
  text-decoration: none; }

.oj-button:focus {
  outline: none; }

.oj-button.oj-focus-highlight {
  outline: dotted 1px #000;
  outline: -webkit-focus-ring-color auto; }

.oj-button.oj-disabled {
  cursor: default; }

/* Full-chrome buttons have chrome (background and border) in all states (default, 
     * focus-only, disabled, hover, active, selected, ...).
     */
.oj-button.oj-button-full-chrome,
.oj-button.oj-button-full-chrome:link,
.oj-button.oj-button-full-chrome:visited,
.oj-button.oj-button-full-chrome:hover,
.oj-button.oj-button-full-chrome:active {
  font-weight: normal; }

/* oj-default is applied iff the button is not in any of the other states, 
       namely oj-active, oj-disabled, oj-selected, oj-hover, or oj-focus.
       oj-focus-only is applied iff the button has oj-focus but not any of the other 4 states listed above.*/
.oj-button.oj-default.oj-button-full-chrome,
.oj-button.oj-focus-only.oj-button-full-chrome {
  background-color: #0572ce;
  background-image: none;
  border-color: #0572ce;
  color: #ffffff;
  box-shadow: none;
  text-shadow: none; }

.oj-button.oj-default.oj-button-full-chrome .oj-button-icon,
.oj-button.oj-focus-only.oj-button-full-chrome .oj-button-icon {
  color: #ffffff; }

.oj-button.oj-hover.oj-button-full-chrome {
  background-color: #0683ec;
  border-color: #0683ec;
  color: #ffffff;
  box-shadow: none; }

.oj-button.oj-hover.oj-button-full-chrome .oj-button-icon {
  color: #ffffff; }

/* oj-active is applied to a push button when it is actively being held down 
       by the mouse button or Enter or Spacebar. */
.oj-button.oj-active.oj-button-full-chrome {
  background-color: #045192;
  border-color: #045192;
  color: #ffffff;
  box-shadow: none; }

.oj-button.oj-active.oj-button-full-chrome .oj-button-icon {
  color: #ffffff; }

.oj-button.oj-selected.oj-button-full-chrome {
  background-color: #045192;
  border-color: #045192;
  color: #ffffff;
  box-shadow: none; }

.oj-button.oj-selected.oj-hover.oj-button-full-chrome {
  color: #d9d9d9; }

.oj-button.oj-selected.oj-button-full-chrome .oj-button-icon {
  color: #ffffff; }

.oj-button.oj-selected.oj-hover.oj-button-full-chrome .oj-button-icon {
  color: #d9d9d9; }

.oj-button.oj-disabled.oj-button-full-chrome {
  background-color: #0572ce;
  background-image: none;
  border-color: #0572ce;
  color: #ffffff;
  box-shadow: none;
  opacity: 0.5; }

.oj-button.oj-disabled.oj-button-full-chrome .oj-button-icon {
  color: #ffffff; }

.oj-button.oj-disabled.oj-selected.oj-button-full-chrome {
  color: #ffffff;
  background-color: #045192;
  border-color: #045192; }

.oj-button.oj-disabled.oj-selected.oj-button-full-chrome .oj-button-icon {
  color: #ffffff; }

/* Half-chrome buttons have no chrome (background or border) in their default, 
     * focus-only, and disabled-not-selected states, but acquire chrome in their 
     * hover, active, and selected states.
     * 
     * Half-chroming is recommended for buttons in a toolbar, and anytime the 
     * half-chrome look is desired.
     * 
     * To set button chroming, use the "chroming" option on the Button, Buttonset, and Toolbar
     * components, per the JSDoc.  Do not apply the oj-button-XXX-chrome classes manually.
     */
.oj-button.oj-default.oj-button-half-chrome,
.oj-button.oj-focus-only.oj-button-half-chrome,
.oj-button.oj-disabled.oj-button-half-chrome {
  border-color: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none; }

.oj-button.oj-default.oj-button-half-chrome,
.oj-button.oj-focus-only.oj-button-half-chrome {
  text-shadow: none;
  color: #0572ce; }

.oj-button.oj-hover.oj-button-half-chrome {
  color: #85bae7;
  background-color: transparent;
  border-color: transparent;
  box-shadow: none; }

.oj-button.oj-active.oj-button-half-chrome {
  color: #0572ce;
  background-color: transparent;
  border-color: transparent;
  opacity: 0.2;
  box-shadow: none; }

.oj-button.oj-selected.oj-button-half-chrome {
  color: #ffffff;
  background-color: #0572ce;
  border-color: #0572ce;
  box-shadow: none; }

.oj-button.oj-selected.oj-hover.oj-button-half-chrome {
  color: #cccccc; }

.oj-button.oj-disabled.oj-button-half-chrome {
  color: #000000;
  opacity: 0.3; }

.oj-button.oj-disabled.oj-selected.oj-button-half-chrome {
  color: #ffffff;
  background-color: #0572ce;
  border-color: #0572ce; }

.oj-button.oj-button-half-chrome,
.oj-button.oj-button-half-chrome:link,
.oj-button.oj-button-half-chrome:visited,
.oj-button.oj-button-half-chrome:hover,
.oj-button.oj-button-half-chrome:active {
  font-weight: normal; }

.oj-button.oj-default.oj-button-half-chrome .oj-button-icon,
.oj-button.oj-focus-only.oj-button-half-chrome .oj-button-icon {
  color: #0572ce; }

.oj-button.oj-hover.oj-button-half-chrome .oj-button-icon {
  color: #85bae7; }

.oj-button.oj-active.oj-button-half-chrome .oj-button-icon {
  color: #0572ce; }

.oj-button.oj-selected.oj-button-half-chrome .oj-button-icon {
  color: #ffffff; }

.oj-button.oj-selected.oj-hover.oj-button-half-chrome .oj-button-icon {
  color: #cccccc; }

.oj-button.oj-disabled.oj-button-half-chrome .oj-button-icon {
  color: #000000; }

.oj-button.oj-disabled.oj-selected.oj-button-half-chrome .oj-button-icon {
  color: #ffffff; }

/* Outlined buttons are similar to half-chrome buttons, but have a border in the default state. */
.oj-button.oj-default.oj-button-outlined-chrome,
.oj-button.oj-focus-only.oj-button-outlined-chrome,
.oj-button.oj-disabled.oj-button-outlined-chrome {
  border-color: #0572ce;
  background-color: transparent;
  background-image: none;
  box-shadow: none; }

.oj-button.oj-default.oj-button-outlined-chrome,
.oj-button.oj-focus-only.oj-button-outlined-chrome {
  text-shadow: none;
  color: #0572ce; }

.oj-button.oj-hover.oj-button-outlined-chrome {
  color: #85bae7;
  background-color: transparent;
  border-color: #85bae7;
  box-shadow: none; }

.oj-button.oj-active.oj-button-outlined-chrome {
  color: #0572ce;
  background-color: rgba(5, 114, 206, 0.15);
  border-color: #0572ce;
  opacity: 1;
  box-shadow: none; }

.oj-button.oj-selected.oj-button-outlined-chrome {
  color: #ffffff;
  background-color: #0572ce;
  border-color: #0572ce;
  box-shadow: none; }

.oj-button.oj-selected.oj-hover.oj-button-outlined-chrome {
  color: #cccccc; }

.oj-button.oj-disabled.oj-button-outlined-chrome {
  color: #0572ce;
  border-color: #0572ce;
  opacity: 0.5; }

.oj-button.oj-disabled.oj-selected.oj-button-outlined-chrome {
  color: #ffffff;
  background-color: #0572ce;
  border-color: #0572ce; }

.oj-button.oj-button-outlined-chrome,
.oj-button.oj-button-outlined-chrome:link,
.oj-button.oj-button-outlined-chrome:visited,
.oj-button.oj-button-outlined-chrome:hover,
.oj-button.oj-button-outlined-chrome:active {
  font-weight: normal; }

.oj-button.oj-default.oj-button-outlined-chrome .oj-button-icon,
.oj-button.oj-focus-only.oj-button-outlined-chrome .oj-button-icon {
  color: #0572ce; }

.oj-button.oj-hover.oj-button-outlined-chrome .oj-button-icon {
  color: #85bae7; }

.oj-button.oj-active.oj-button-outlined-chrome .oj-button-icon {
  color: #0572ce; }

.oj-button.oj-selected.oj-button-outlined-chrome .oj-button-icon {
  color: #ffffff; }

.oj-button.oj-selected.oj-hover.oj-button-outlined-chrome .oj-button-icon {
  color: #cccccc; }

.oj-button.oj-disabled.oj-button-outlined-chrome .oj-button-icon {
  color: #0572ce; }

.oj-button.oj-disabled.oj-selected.oj-button-outlined-chrome .oj-button-icon {
  color: #ffffff; }

/* The element containing the text of buttons without icons.  This is the Button (input element) 
     * itself for <input type=button|submit|reset>, which doesn't support icons at all, and a nested span 
     * for other types of Buttons.
     */
input.oj-button[type="button"],
input.oj-button[type="submit"],
input.oj-button[type="reset"],
.oj-button-text-only .oj-button-text {
  padding: 0 0.875rem; }

/* The text span of buttons with text, a left icon, but no right icon */
html:not([dir="rtl"]) .oj-button-text-icon-start .oj-button-text {
  padding: 0 0.875rem 0 0; }

html[dir="rtl"] .oj-button-text-icon-end .oj-button-text {
  padding: 0 0.875rem 0 0; }

/* The text span of buttons with text, a right icon, but no left icon */
html:not([dir="rtl"]) .oj-button-text-icon-end .oj-button-text {
  padding: 0 0 0 0.875rem; }

html[dir="rtl"] .oj-button-text-icon-start .oj-button-text {
  padding: 0 0 0 0.875rem; }

/* The text span of buttons with text and both icons */
.oj-button-text-icons .oj-button-text {
  padding: 0; }

/* The left icon of buttons with text and a left icon, with or without a right icon */
html:not([dir="rtl"]) .oj-button-text-icon-start .oj-button-icon.oj-start, html:not([dir="rtl"])
.oj-button-text-icons .oj-button-icon.oj-start {
  margin-right: 0.625rem;
  margin-left: 0.625rem; }

html[dir="rtl"] .oj-button-text-icon-end .oj-button-icon.oj-end, html[dir="rtl"]
.oj-button-text-icons .oj-button-icon.oj-end {
  margin-right: 0.625rem;
  margin-left: 0.625rem; }

/* The left icon of buttons with 2 icons and no text */
html:not([dir="rtl"]) .oj-button-icons-only .oj-button-icon.oj-start {
  margin-right: 0.625rem;
  margin-left: 0.625rem; }

html[dir="rtl"] .oj-button-icons-only .oj-button-icon.oj-end {
  margin-right: 0.625rem;
  margin-left: 0.625rem; }

/* The icon of buttons with with 1 icon (whether start or end) and no text */
.oj-button-icon-only .oj-button-icon {
  margin-right: 0.625rem;
  margin-left: 0.625rem; }

/* The right icon of buttons with text and a right icon, with or without a left icon */
html:not([dir="rtl"]) .oj-button-text-icon-end .oj-button-icon.oj-end, html:not([dir="rtl"])
.oj-button-text-icons .oj-button-icon.oj-end {
  margin-right: 0.625rem;
  margin-left: 0.625rem; }

html[dir="rtl"] .oj-button-text-icon-start .oj-button-icon.oj-start, html[dir="rtl"]
.oj-button-text-icons .oj-button-icon.oj-start {
  margin-right: 0.625rem;
  margin-left: 0.625rem; }

/* The right icon of buttons with 2 icons and no text */
html:not([dir="rtl"]) .oj-button-icons-only .oj-button-icon.oj-end {
  margin-right: 0.625rem; }

html[dir="rtl"] .oj-button-icons-only .oj-button-icon.oj-start {
  margin-right: 0.625rem; }

/* The element containing the text of buttons without icons.  This is the Button (input element) 
     * itself for <input type=button|submit|reset>, which doesn't support icons at all, and a nested span 
     * for other types of Buttons.
     */
input.oj-button-sm.oj-button[type="button"],
input.oj-button-sm.oj-button[type="submit"],
input.oj-button-sm.oj-button[type="reset"],
.oj-button-sm.oj-button-text-only .oj-button-text {
  padding: 0 0.625rem; }

/* The text span of buttons with text, a left icon, but no right icon */
html:not([dir="rtl"]) .oj-button-sm.oj-button-text-icon-start .oj-button-text {
  padding: 0 0.625rem 0 0; }

html[dir="rtl"] .oj-button-sm.oj-button-text-icon-end .oj-button-text {
  padding: 0 0.625rem 0 0; }

/* The text span of buttons with text, a right icon, but no left icon */
html:not([dir="rtl"]) .oj-button-sm.oj-button-text-icon-end .oj-button-text {
  padding: 0 0 0 0.625rem; }

html[dir="rtl"] .oj-button-sm.oj-button-text-icon-start .oj-button-text {
  padding: 0 0 0 0.625rem; }

/* The text span of buttons with text and both icons */
.oj-button-sm.oj-button-text-icons .oj-button-text {
  padding: 0; }

/* The left icon of buttons with text and a left icon, with or without a right icon */
html:not([dir="rtl"]) .oj-button-sm.oj-button-text-icon-start .oj-button-icon.oj-start, html:not([dir="rtl"])
.oj-button-sm.oj-button-text-icons .oj-button-icon.oj-start {
  margin-right: 0.188rem;
  margin-left: 0.188rem; }

html[dir="rtl"] .oj-button-sm.oj-button-text-icon-end .oj-button-icon.oj-end, html[dir="rtl"]
.oj-button-sm.oj-button-text-icons .oj-button-icon.oj-end {
  margin-right: 0.188rem;
  margin-left: 0.188rem; }

/* The left icon of buttons with 2 icons and no text */
html:not([dir="rtl"]) .oj-button-sm.oj-button-icons-only .oj-button-icon.oj-start {
  margin-right: 0.188rem;
  margin-left: 0.188rem; }

html[dir="rtl"] .oj-button-sm.oj-button-icons-only .oj-button-icon.oj-end {
  margin-right: 0.188rem;
  margin-left: 0.188rem; }

/* The icon of buttons with with 1 icon (whether start or end) and no text */
.oj-button-sm.oj-button-icon-only .oj-button-icon {
  margin-right: 0.188rem;
  margin-left: 0.188rem; }

/* The right icon of buttons with text and a right icon, with or without a left icon */
html:not([dir="rtl"]) .oj-button-sm.oj-button-text-icon-end .oj-button-icon.oj-end, html:not([dir="rtl"])
.oj-button-sm.oj-button-text-icons .oj-button-icon.oj-end {
  margin-right: 0.188rem;
  margin-left: 0.188rem; }

html[dir="rtl"] .oj-button-sm.oj-button-text-icon-start .oj-button-icon.oj-start, html[dir="rtl"]
.oj-button-sm.oj-button-text-icons .oj-button-icon.oj-start {
  margin-right: 0.188rem;
  margin-left: 0.188rem; }

/* The right icon of buttons with 2 icons and no text */
html:not([dir="rtl"]) .oj-button-sm.oj-button-icons-only .oj-button-icon.oj-end {
  margin-right: 0.188rem; }

html[dir="rtl"] .oj-button-sm.oj-button-icons-only .oj-button-icon.oj-start {
  margin-right: 0.188rem; }

/* The element containing the text of buttons without icons.  This is the Button (input element) 
     * itself for <input type=button|submit|reset>, which doesn't support icons at all, and a nested span 
     * for other types of Buttons.
     */
input.oj-button-lg.oj-button[type="button"],
input.oj-button-lg.oj-button[type="submit"],
input.oj-button-lg.oj-button[type="reset"],
.oj-button-lg.oj-button-text-only .oj-button-text {
  padding: 0 1.25rem; }

/* The text span of buttons with text, a left icon, but no right icon */
html:not([dir="rtl"]) .oj-button-lg.oj-button-text-icon-start .oj-button-text {
  padding: 0 1.25rem 0 0; }

html[dir="rtl"] .oj-button-lg.oj-button-text-icon-end .oj-button-text {
  padding: 0 1.25rem 0 0; }

/* The text span of buttons with text, a right icon, but no left icon */
html:not([dir="rtl"]) .oj-button-lg.oj-button-text-icon-end .oj-button-text {
  padding: 0 0 0 1.25rem; }

html[dir="rtl"] .oj-button-lg.oj-button-text-icon-start .oj-button-text {
  padding: 0 0 0 1.25rem; }

/* The text span of buttons with text and both icons */
.oj-button-lg.oj-button-text-icons .oj-button-text {
  padding: 0; }

/* The left icon of buttons with text and a left icon, with or without a right icon */
html:not([dir="rtl"]) .oj-button-lg.oj-button-text-icon-start .oj-button-icon.oj-start, html:not([dir="rtl"])
.oj-button-lg.oj-button-text-icons .oj-button-icon.oj-start {
  margin-right: 0.625rem;
  margin-left: 1.125rem; }

html[dir="rtl"] .oj-button-lg.oj-button-text-icon-end .oj-button-icon.oj-end, html[dir="rtl"]
.oj-button-lg.oj-button-text-icons .oj-button-icon.oj-end {
  margin-right: 0.625rem;
  margin-left: 1.125rem; }

/* The left icon of buttons with 2 icons and no text */
html:not([dir="rtl"]) .oj-button-lg.oj-button-icons-only .oj-button-icon.oj-start {
  margin-right: 0.625rem;
  margin-left: 1.125rem; }

html[dir="rtl"] .oj-button-lg.oj-button-icons-only .oj-button-icon.oj-end {
  margin-right: 0.625rem;
  margin-left: 1.125rem; }

/* The icon of buttons with with 1 icon (whether start or end) and no text */
.oj-button-lg.oj-button-icon-only .oj-button-icon {
  margin-right: 1.125rem;
  margin-left: 1.125rem; }

/* The right icon of buttons with text and a right icon, with or without a left icon */
html:not([dir="rtl"]) .oj-button-lg.oj-button-text-icon-end .oj-button-icon.oj-end, html:not([dir="rtl"])
.oj-button-lg.oj-button-text-icons .oj-button-icon.oj-end {
  margin-right: 1.125rem;
  margin-left: 0.625rem; }

html[dir="rtl"] .oj-button-lg.oj-button-text-icon-start .oj-button-icon.oj-start, html[dir="rtl"]
.oj-button-lg.oj-button-text-icons .oj-button-icon.oj-start {
  margin-right: 1.125rem;
  margin-left: 0.625rem; }

/* The right icon of buttons with 2 icons and no text */
html:not([dir="rtl"]) .oj-button-lg.oj-button-icons-only .oj-button-icon.oj-end {
  margin-right: 1.125rem; }

html[dir="rtl"] .oj-button-lg.oj-button-icons-only .oj-button-icon.oj-start {
  margin-right: 1.125rem; }

/* The element containing the text of buttons without icons.  This is the Button (input element) 
     * itself for <input type=button|submit|reset>, which doesn't support icons at all, and a nested span 
     * for other types of Buttons.
     */
input.oj-button-xl.oj-button[type="button"],
input.oj-button-xl.oj-button[type="submit"],
input.oj-button-xl.oj-button[type="reset"],
.oj-button-xl.oj-button-text-only .oj-button-text {
  padding: 0 1.25rem; }

/* The text span of buttons with text, a left icon, but no right icon */
html:not([dir="rtl"]) .oj-button-xl.oj-button-text-icon-start .oj-button-text {
  padding: 0 1.25rem 0 0; }

html[dir="rtl"] .oj-button-xl.oj-button-text-icon-end .oj-button-text {
  padding: 0 1.25rem 0 0; }

/* The text span of buttons with text, a right icon, but no left icon */
html:not([dir="rtl"]) .oj-button-xl.oj-button-text-icon-end .oj-button-text {
  padding: 0 0 0 1.25rem; }

html[dir="rtl"] .oj-button-xl.oj-button-text-icon-start .oj-button-text {
  padding: 0 0 0 1.25rem; }

/* The text span of buttons with text and both icons */
.oj-button-xl.oj-button-text-icons .oj-button-text {
  padding: 0; }

/* The left icon of buttons with text and a left icon, with or without a right icon */
html:not([dir="rtl"]) .oj-button-xl.oj-button-text-icon-start .oj-button-icon.oj-start, html:not([dir="rtl"])
.oj-button-xl.oj-button-text-icons .oj-button-icon.oj-start {
  margin-right: 0.625rem;
  margin-left: 1.125rem; }

html[dir="rtl"] .oj-button-xl.oj-button-text-icon-end .oj-button-icon.oj-end, html[dir="rtl"]
.oj-button-xl.oj-button-text-icons .oj-button-icon.oj-end {
  margin-right: 0.625rem;
  margin-left: 1.125rem; }

/* The left icon of buttons with 2 icons and no text */
html:not([dir="rtl"]) .oj-button-xl.oj-button-icons-only .oj-button-icon.oj-start {
  margin-right: 0.625rem;
  margin-left: 1.125rem; }

html[dir="rtl"] .oj-button-xl.oj-button-icons-only .oj-button-icon.oj-end {
  margin-right: 0.625rem;
  margin-left: 1.125rem; }

/* The icon of buttons with with 1 icon (whether start or end) and no text */
.oj-button-xl.oj-button-icon-only .oj-button-icon {
  margin-right: 1.125rem;
  margin-left: 1.125rem; }

/* The right icon of buttons with text and a right icon, with or without a left icon */
html:not([dir="rtl"]) .oj-button-xl.oj-button-text-icon-end .oj-button-icon.oj-end, html:not([dir="rtl"])
.oj-button-xl.oj-button-text-icons .oj-button-icon.oj-end {
  margin-right: 1.125rem;
  margin-left: 0.625rem; }

html[dir="rtl"] .oj-button-xl.oj-button-text-icon-start .oj-button-icon.oj-start, html[dir="rtl"]
.oj-button-xl.oj-button-text-icons .oj-button-icon.oj-start {
  margin-right: 1.125rem;
  margin-left: 0.625rem; }

/* The right icon of buttons with 2 icons and no text */
html:not([dir="rtl"]) .oj-button-xl.oj-button-icons-only .oj-button-icon.oj-end {
  margin-right: 1.125rem; }

html[dir="rtl"] .oj-button-xl.oj-button-icons-only .oj-button-icon.oj-start {
  margin-right: 1.125rem; }

/* reset extra padding in Firefox, see h5bp.com/1 */
input.oj-button::-moz-focus-inner,
button.oj-button::-moz-focus-inner {
  border: 0;
  padding: 0; }

.oj-hicontrast .oj-button.oj-focus {
  outline-width: 3px; }

.oj-hicontrast .oj-button.oj-selected {
  border-style: double;
  border-width: 3px; }

.oj-hicontrast .oj-button.oj-disabled {
  border-style: dotted; }

.oj-hicontrast .oj-button.oj-disabled.oj-selected {
  border-width: 2px; }

/* menu buttons */
.oj-button-option-defaults {
  font-family: '{"chroming":"half"}'; }

.oj-button-primary.oj-button.oj-default.oj-button-full-chrome, .oj-button-primary.oj-button.oj-focus-only.oj-button-full-chrome {
  background-color: #0572ce;
  background-image: none;
  border-color: #0572ce;
  color: #ffffff;
  box-shadow: none;
  text-shadow: none; }

.oj-button-primary.oj-button.oj-default.oj-button-full-chrome .oj-button-icon,
.oj-button-primary.oj-button.oj-focus-only.oj-button-full-chrome .oj-button-icon {
  color: #ffffff; }

.oj-button-primary.oj-button.oj-hover.oj-button-full-chrome:not(.oj-active) {
  background-color: #0683ec;
  background-image: none;
  border-color: #0683ec;
  color: #ffffff;
  box-shadow: none;
  text-shadow: none; }

.oj-button-primary.oj-button.oj-hover.oj-button-full-chrome:not(.oj-active) .oj-button-icon {
  color: #ffffff; }

.oj-button-primary.oj-button.oj-active.oj-button-full-chrome {
  background-color: #0461b0;
  background-image: none;
  border-color: #0461b0;
  color: #ffffff;
  box-shadow: none;
  text-shadow: none; }

.oj-button-primary.oj-button.oj-active.oj-button-full-chrome .oj-button-icon {
  color: #ffffff; }

.oj-button-primary.oj-button.oj-selected.oj-button-full-chrome:not(.oj-disabled) {
  background-color: #0461b0;
  background-image: none;
  border-color: #0461b0;
  color: #ffffff;
  box-shadow: none;
  text-shadow: none; }

.oj-button-primary.oj-button.oj-selected.oj-hover.oj-button-full-chrome:not(.oj-disabled) {
  background-color: #0461b0;
  background-image: none;
  border-color: #0461b0;
  color: #d9d9d9;
  box-shadow: none;
  text-shadow: none; }

.oj-button-primary.oj-button.oj-selected.oj-button-full-chrome:not(.oj-disabled) .oj-button-icon {
  color: #ffffff; }

.oj-button-primary.oj-button.oj-selected.oj-hover.oj-button-full-chrome:not(.oj-disabled) .oj-button-icon {
  color: #ffffff; }

.oj-button-primary.oj-button.oj-disabled.oj-button-full-chrome {
  background-color: #0572ce;
  border-color: #0572ce;
  color: #ffffff;
  opacity: 0.4; }

.oj-button-primary.oj-button.oj-disabled.oj-button-full-chrome .oj-button-icon {
  color: #ffffff; }

.oj-button-primary.oj-button.oj-disabled.oj-selected.oj-button-full-chrome {
  color: #ffffff;
  background-color: #0461b0;
  border-color: #0461b0; }

.oj-button-primary.oj-button.oj-disabled.oj-selected.oj-button-full-chrome .oj-button-icon {
  color: #ffffff; }

.oj-button-confirm.oj-button.oj-default.oj-button-full-chrome, .oj-button-confirm.oj-button.oj-focus-only.oj-button-full-chrome {
  background-color: #168100;
  background-image: none;
  border-color: #168100;
  color: #ffffff;
  box-shadow: none;
  text-shadow: none; }

.oj-button-confirm.oj-button.oj-default.oj-button-full-chrome .oj-button-icon,
.oj-button-confirm.oj-button.oj-focus-only.oj-button-full-chrome .oj-button-icon {
  color: #ffffff; }

.oj-button-confirm.oj-button.oj-hover.oj-button-full-chrome:not(.oj-active) {
  background-color: #1ba000;
  background-image: none;
  border-color: #1ba000;
  color: #ffffff;
  box-shadow: none;
  text-shadow: none; }

.oj-button-confirm.oj-button.oj-hover.oj-button-full-chrome:not(.oj-active) .oj-button-icon {
  color: #ffffff; }

.oj-button-confirm.oj-button.oj-active.oj-button-full-chrome {
  background-color: #116200;
  background-image: none;
  border-color: #116200;
  color: #ffffff;
  box-shadow: none;
  text-shadow: none; }

.oj-button-confirm.oj-button.oj-active.oj-button-full-chrome .oj-button-icon {
  color: #ffffff; }

.oj-button-confirm.oj-button.oj-selected.oj-button-full-chrome:not(.oj-disabled) {
  background-color: #116200;
  background-image: none;
  border-color: #116200;
  color: #ffffff;
  box-shadow: none;
  text-shadow: none; }

.oj-button-confirm.oj-button.oj-selected.oj-hover.oj-button-full-chrome:not(.oj-disabled) {
  background-color: #116200;
  background-image: none;
  border-color: #116200;
  color: #d9d9d9;
  box-shadow: none;
  text-shadow: none; }

.oj-button-confirm.oj-button.oj-selected.oj-button-full-chrome:not(.oj-disabled) .oj-button-icon {
  color: #ffffff; }

.oj-button-confirm.oj-button.oj-selected.oj-hover.oj-button-full-chrome:not(.oj-disabled) .oj-button-icon {
  color: #ffffff; }

.oj-button-confirm.oj-button.oj-disabled.oj-button-full-chrome {
  background-color: #168100;
  border-color: #168100;
  color: #ffffff;
  opacity: 0.4; }

.oj-button-confirm.oj-button.oj-disabled.oj-button-full-chrome .oj-button-icon {
  color: #ffffff; }

.oj-button-confirm.oj-button.oj-disabled.oj-selected.oj-button-full-chrome {
  color: #ffffff;
  background-color: #116200;
  border-color: #116200; }

.oj-button-confirm.oj-button.oj-disabled.oj-selected.oj-button-full-chrome .oj-button-icon {
  color: #ffffff; }

/* component */
/* --------------------------------------------------------------- */
.oj-component-popup, .oj-menu, .oj-dialog, .oj-popup, .oj-listbox-drop {
  z-index: 1;
  position: absolute; }

.oj-component-layer, .oj-menu-layer, .oj-dialog-layer, .oj-popup-layer, .oj-listbox-drop-layer {
  position: relative; }

/* overlay used to hide non-modal content */
.oj-component-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: .4;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent; }

.oj-component-overlay {
  opacity: .5; }

/* menu */
/* --------------------------------------------------------------- */
oj-menu:not(.oj-complete) {
  visibility: hidden; }

.oj-menu-layer {
  z-index: 1000; }

.oj-menu {
  color: #000;
  list-style: none;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  display: inline-block;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent; }

.oj-menu-dropdown {
  border: 1px solid #e7e7e9;
  border-radius: 5px;
  background: #ffffff;
  font-size: 1rem; }

.oj-menu-sheet {
  border: 0;
  border-radius: 12px;
  background: transparent;
  font-size: 1.5rem;
  width: calc(100% - 1.5rem); }

.oj-menu:focus {
  outline: none; }

.oj-menu-dropdown.oj-component {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); }

.oj-menu.oj-menu-submenu {
  position: absolute;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.25); }

.oj-menu-item {
  margin: 0;
  padding: 0;
  width: 100%; }

.oj-menu-dropdown .oj-menu-item:first-child,
.oj-menu-dropdown .oj-menu-item:first-child > a {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px; }

.oj-menu-dropdown .oj-menu-item:last-child,
.oj-menu-dropdown .oj-menu-item:last-child > a {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px; }

.oj-menu-sheet .oj-menu-item:first-child,
.oj-menu-sheet .oj-menu-item:first-child > a {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px; }

.oj-menu-sheet .oj-menu-item:last-child,
.oj-menu-sheet .oj-menu-item:last-child > a {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px; }

.oj-menu-sheet .oj-menu-item-after-divider,
.oj-menu-sheet .oj-menu-item-after-divider > a {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px; }

.oj-menu-sheet .oj-menu-item-before-divider,
.oj-menu-sheet .oj-menu-item-before-divider > a {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px; }

.oj-menu-divider {
  margin: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-style: solid; }

.oj-menu-dropdown .oj-menu-divider {
  border-width: 2px 0 0 0;
  border-color: #d5dfe5; }

.oj-menu-sheet .oj-menu-divider {
  border-width: 8px 0 0 0;
  border-color: transparent; }

.oj-menu-item > a {
  position: relative;
  text-decoration: none;
  display: block;
  font-weight: normal; }

.oj-menu-dropdown .oj-menu-item > a {
  line-height: 2.6875;
  color: #0572ce;
  border-top-width: 1px;
  border-top-color: #d5dfe5;
  border-top-style: solid; }

.oj-menu-sheet .oj-menu-item > a {
  line-height: 2.3333333333;
  background: #ffffff;
  color: #0572ce;
  border-top-width: 1px;
  border-top-color: rgba(213, 223, 229, 0.5);
  border-top-style: solid; }

.oj-menu-item-cancel > a {
  font-weight: bold; }

/* For each menu and submenu, either oj-menu-icons or oj-menu-text-only is applied to the menu, depending on whether at 
       least one menu item in the menu (excluding its "Cancel" menu item and submenus) has an icon (not submenu icon).  
       These classes facilitate (say) leaving space for a column of icons iff at least one item has an icon, and doing so 
       for each menu/submenu independently. */
html:not([dir="rtl"]) .oj-menu-icons > .oj-menu-item > a {
  padding-left: calc(0.625rem + 24px + 0.5rem); }

html[dir="rtl"] .oj-menu-icons > .oj-menu-item > a {
  padding-right: calc(0.625rem + 24px + 0.5rem); }

.oj-menu-text-only > .oj-menu-item > a {
  text-align: center; }
  html:not([dir="rtl"]) .oj-menu-text-only > .oj-menu-item > a {
    padding-left: calc(16px + 0.75rem); }
  html[dir="rtl"] .oj-menu-text-only > .oj-menu-item > a {
    padding-right: calc(16px + 0.75rem); }

.oj-menu-text-only .oj-menu-cancel-icon {
  display: none; }

.oj-menu-divider + .oj-menu-item > a {
  border-top-width: 0; }

.oj-menu-item.oj-focus-highlight > a {
  outline: dotted 1px #000;
  outline: -webkit-focus-ring-color auto; }

.oj-menu-dropdown .oj-menu-item.oj-focus > a,
.oj-menu-dropdown .oj-menu-item.oj-focus-ancestor > a {
  background: #f6f6f7; }

.oj-menu-dropdown .oj-menu-item.oj-focus > a,
.oj-menu-dropdown .oj-menu-item.oj-focus-ancestor > a,
.oj-menu-dropdown .oj-menu-item.oj-focus + .oj-menu-item > a,
.oj-menu-dropdown .oj-menu-item.oj-focus-ancestor + .oj-menu-item > a {
  border-top-color: #d4d4d6; }

.oj-menu-sheet .oj-menu-item.oj-focus > a {
  background: #f6f6f7; }

.oj-menu-sheet .oj-menu-item.oj-focus > a,
.oj-menu-sheet .oj-menu-item.oj-focus + .oj-menu-item > a {
  border-top-color: rgba(213, 223, 229, 0.5); }

.oj-menu.oj-disabled .oj-menu-item > a,
.oj-menu-item.oj-disabled > a {
  cursor: default; }

.oj-menu-dropdown.oj-disabled .oj-menu-item > a,
.oj-menu-dropdown .oj-menu-item.oj-disabled > a {
  color: rgba(5, 114, 206, 0.5); }

.oj-menu-sheet.oj-disabled .oj-menu-item > a,
.oj-menu-sheet .oj-menu-item.oj-disabled > a {
  color: rgba(5, 114, 206, 0.5); }

/* menu item icons (not submenu icons) */
.oj-menu-item-icon {
  color: #0572ce;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }
  html:not([dir="rtl"]) .oj-menu-item-icon {
    margin-left: calc(-24px - 0.5rem);
    margin-right: 0.5rem; }
  html[dir="rtl"] .oj-menu-item-icon {
    margin-right: calc(-24px - 0.5rem);
    margin-left: 0.5rem; }

.oj-menu-item .oj-menu-item-icon {
  font-size: 24px; }

.oj-menu.oj-disabled .oj-menu-item-icon,
.oj-menu-item.oj-disabled .oj-menu-item-icon {
  opacity: 0.5; }

.oj-menu-submenu-icon {
  position: absolute;
  padding-top: calc(1.34375rem - 28px/2);
  line-height: 1.8;
  height: auto;
  color: #bababc; }
  html:not([dir="rtl"]) .oj-menu-submenu-icon {
    right: 0.375rem; }
  html[dir="rtl"] .oj-menu-submenu-icon {
    left: 0.375rem; }

.oj-menu-context-menu-launcher {
  -webkit-touch-callout: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.oj-hicontrast .oj-menu-item.oj-focus > a,
.oj-hicontrast .oj-menu-item.oj-focus-ancestor > a {
  outline: dotted 3px #000; }

.oj-hicontrast .oj-menu-item.oj-focus.oj-disabled > a {
  outline: dotted 1px #000; }

.oj-menu-config {
  font-family: '{"dropDownThresholdWidth":"768px","sheetCancelAffordance":"menuItem","dropDownModality":"modal","sheetModality":"modal","sheetSwipeDownBehavior":"none","sheetMarginBottom":12}'; }

html:not([dir="rtl"]) .oj-menu-item > a {
  padding-right: calc(16px + 0.75rem); }

html[dir="rtl"] .oj-menu-item > a {
  padding-left: calc(16px + 0.75rem); }

oj-navigation-list:not(.oj-complete) {
  visibility: hidden; }

/*Navlist root node*/
.oj-navigationlist,
.oj-navigationlist-listview-container {
  overflow-x: hidden; }

.oj-navigationlist-touch {
  -webkit-tap-highlight-color: transparent; }

/* navigation list divider used in category header navlist*/
.oj-navigationlist-category-divider {
  border-color: #e7e7e9;
  border-style: solid;
  border-width: 1px 0 0;
  font-size: 0;
  height: 0;
  line-height: 0;
  margin: 0 3px; }

/* navigation list divider used in horizontal navlist to separate buttons*/
.oj-navigationlist-horizontal .oj-navigationlist-divider {
  border-color: #d5dfe5;
  border-style: solid;
  border-width: 0 1px 0 0;
  font-size: 0;
  height: 1.714rem;
  line-height: 0;
  margin: 5px 0;
  -webkit-align-self: center;
  align-self: center;
  display: none; }

.oj-navigationlist-item-dividers .oj-navigationlist-divider {
  display: list-item; }

/* Basic styling  for all ul elements in list*/
.oj-navigationlist-element, .oj-navigationlist-group {
  list-style-type: none;
  padding-left: 0;
  padding-right: 0;
  margin: 0; }

.oj-navigationlist-item-element:not(.oj-navigationlist-item) {
  display: block; }

.oj-navigationlist-item-element {
  list-style-image: url(""); }

/* Remove focus ring on outer ul element*/
.oj-navigationlist-element:focus {
  outline: none; }

/* Style content wrapper of each list item */
.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-label {
  vertical-align: middle; }

.oj-navigationlist-vertical .oj-navigationlist-item::before {
  min-height: 2.688rem;
  content: "";
  display: inline-block;
  visibility: hidden; }

.oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item::before {
  min-height: 1.75rem; }

.oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item-label {
  font-size: 0.8125rem; }

/* Styling for expand/collapse icons holder */
.oj-navigationlist-collapse-icon,
.oj-navigationlist-expand-icon {
  -webkit-order: 1;
  order: 1;
  -webkit-align-self: center;
  align-self: center; }

a.oj-navigationlist-collapse-icon,
a.oj-navigationlist-expand-icon,
a.oj-navigationlist-collapse-icon:hover,
a.oj-navigationlist-expand-icon:hover {
  text-decoration: none; }

/* Style content of each list item */
.oj-navigationlist-item-content {
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-align-items: center;
  align-items: center; }

a.oj-navigationlist-item-content {
  text-decoration: none;
  font-weight: normal;
  outline: none;
  overflow: hidden; }

a.oj-navigationlist-item-content:active {
  background-color: transparent; }

a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: #595959; }
  .oj-contrast-marker a.oj-navigationlist-item-content .oj-navigationlist-item-label {
    color: #c0c4c8; }

.oj-selected > a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: #0572ce; }
  .oj-contrast-marker .oj-selected > a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
    color: #fafafa; }

.oj-contrast-marker .oj-hover:not(.oj-selected) > a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: #fafafa; }

/* Navigation list node label or arbitrary content place holder*/
.oj-navigationlist-item-label {
  -webkit-order: 2;
  order: 2;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
  display: inline-block;
  line-height: normal; }

.oj-navigationlist-item-text-wrap .oj-navigationlist-item-label {
  white-space: normal; }

/*Padding for vertical navlist item label*/
.oj-navigationlist-vertical .oj-navigationlist-item-label {
  padding: 3px 0;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto; }

/* hide label for icons-only case */
.oj-navigationlist-icon-only .oj-navigationlist-item-label {
  display: none; }

/* List item's Icon */
.oj-navigationlist-item-icon {
  color: #595959;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }
  .oj-contrast-marker .oj-navigationlist-item-icon {
    color: #c0c4c8; }

.oj-navigationlist-group-item {
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto; }

.oj-navigationlist-group {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto; }

/* Disabled node */
.oj-navigationlist-item.oj-disabled > .oj-navigationlist-item-content,
.oj-navigationlist-item.oj-disabled > .oj-navigationlist-collapse-icon,
.oj-navigationlist-item.oj-disabled > .oj-navigationlist-expand-icon {
  opacity: 0.5; }

.oj-navigationlist-item.oj-disabled .oj-navigationlist-item-label {
  color: #595959; }
  .oj-contrast-marker .oj-navigationlist-item.oj-disabled .oj-navigationlist-item-label {
    color: #696c6E; }

.oj-navigationlist-item.oj-disabled a.oj-navigationlist-item-content {
  cursor: default; }

.oj-navigationlist-item.oj-disabled .oj-navigationlist-item-icon {
  color: #595959; }
  .oj-contrast-marker .oj-navigationlist-item.oj-disabled .oj-navigationlist-item-icon {
    color: #696c6E; }

/* Selected node */
.oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {
  color: #0572ce; }
  .oj-contrast-marker .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {
    color: #fafafa; }

/* hover icon */
.oj-navigationlist-item.oj-hover.oj-selected .oj-navigationlist-item-icon,
.oj-navigationlist-item.oj-hover .oj-navigationlist-item-icon {
  color: #85bbe7; }
  .oj-contrast-marker .oj-navigationlist-item.oj-hover.oj-selected .oj-navigationlist-item-icon, .oj-contrast-marker
  .oj-navigationlist-item.oj-hover .oj-navigationlist-item-icon {
    color: #fafafa; }

/*borders for high contrast mode*/
.oj-hicontrast .oj-navigationlist-item.oj-selected,
.oj-hicontrast .oj-navigationlist-item.oj-selected.oj-hover,
.oj-hicontrast .oj-navigationlist-item.oj-selected.oj-focus {
  border: 1px solid #000000; }

.oj-hicontrast .oj-navigationlist-item.oj-hover,
.oj-hicontrast .oj-navigationlist-item.oj-focus {
  border: 1px dotted #000000; }

/*Focus ring around  focused list item*/
.oj-navigationlist .oj-navigationlist-item.oj-focus-highlight {
  outline: dotted 1px #4f4f4f;
  outline-offset: -1px; }

.oj-hicontrast .oj-navigationlist-item.oj-focus {
  outline: none; }

.oj-navigationlist-item {
  border-color: transparent;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: stretch;
  align-items: stretch; }

.oj-navigationlist-vertical .oj-navigationlist-item.oj-selected {
  background-color: #f6f6f7; }
  .oj-contrast-marker .oj-navigationlist-vertical .oj-navigationlist-item.oj-selected {
    background-color: #202324; }

.oj-navigationlist-item.oj-selected {
  border-color: #0572ce; }

.oj-navigationlist-item.oj-hover:not(.oj-selected) {
  background-color: #ebeced;
  border-color: #85bbe7; }
  .oj-contrast-marker .oj-navigationlist-item.oj-hover:not(.oj-selected) {
    background-color: #262628; }

/*---- Start of common styles for collapsible and expanded navigation list ----*/
.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
  -webkit-align-self: center;
  align-self: center; }
  html:not([dir="rtl"]) .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
    margin-right: 0.625rem; }
  html[dir="rtl"] .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
    margin-left: 0.625rem; }

html:not([dir="rtl"]) .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-has-icons > .oj-navigationlist-item > .oj-navigationlist-item-no-icon .oj-navigationlist-item-label {
  margin-left: calc(0.625rem + 24px); }

html[dir="rtl"] .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-has-icons > .oj-navigationlist-item > .oj-navigationlist-item-no-icon .oj-navigationlist-item-label {
  margin-right: calc(0.625rem + 24px); }

.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  border-style: solid; }
  html[dir="rtl"] .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
    padding-right: calc(0.625rem - 3px);
    border-width: 0 3px 0 0; }
  html:not([dir="rtl"]) .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
    padding-left: calc(0.625rem - 3px);
    border-width: 0 0 0 3px; }

.oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item,
.oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item {
  border-style: none; }

.oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-focus,
.oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-hover,
.oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-focus,
.oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-hover {
  border-style: dotted; }
  html[dir="rtl"] .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-focus, html[dir="rtl"]
  .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-hover, html[dir="rtl"]
  .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-focus, html[dir="rtl"]
  .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-hover {
    border-width: 1px; }
  html:not([dir="rtl"]) .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-focus, html:not([dir="rtl"])
  .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-hover, html:not([dir="rtl"])
  .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-focus, html:not([dir="rtl"])
  .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-hover {
    border-width: 1px; }

.oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected,
.oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-focus,
.oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-hover,
.oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected,
.oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected.oj-focus,
.oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected.oj-hover {
  border-style: solid; }
  html[dir="rtl"] .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected, html[dir="rtl"]
  .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-focus, html[dir="rtl"]
  .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-hover, html[dir="rtl"]
  .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected, html[dir="rtl"]
  .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected.oj-focus, html[dir="rtl"]
  .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected.oj-hover {
    border-width: 1px; }
  html:not([dir="rtl"]) .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected, html:not([dir="rtl"])
  .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-focus, html:not([dir="rtl"])
  .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-hover, html:not([dir="rtl"])
  .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected, html:not([dir="rtl"])
  .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected.oj-focus, html:not([dir="rtl"])
  .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected.oj-hover {
    border-width: 1px; }

/* Padding for sublist    */
html:not([dir="rtl"]) .oj-navigationlist-collapsible ul:not(.oj-navigationlist-has-icons) > .oj-navigationlist-item-element > ul, html:not([dir="rtl"])
.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical ul:not(.oj-navigationlist-has-icons) > .oj-navigationlist-item-element > ul {
  padding-left: 0.625rem; }

html[dir="rtl"] .oj-navigationlist-collapsible ul:not(.oj-navigationlist-has-icons) > .oj-navigationlist-item-element > ul, html[dir="rtl"]
.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical ul:not(.oj-navigationlist-has-icons) > .oj-navigationlist-item-element > ul {
  padding-right: 0.625rem; }

html:not([dir="rtl"]) .oj-navigationlist-collapsible ul.oj-navigationlist-has-icons > .oj-navigationlist-item-element > ul, html:not([dir="rtl"])
.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical ul.oj-navigationlist-has-icons > .oj-navigationlist-item-element > ul {
  padding-left: calc(0.625rem + 0.625rem + 24px); }

html[dir="rtl"] .oj-navigationlist-collapsible ul.oj-navigationlist-has-icons > .oj-navigationlist-item-element > ul, html[dir="rtl"]
.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical ul.oj-navigationlist-has-icons > .oj-navigationlist-item-element > ul {
  padding-right: calc(0.625rem + 0.625rem + 24px); }

html:not([dir="rtl"]) .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-navigationlist-group-item) .oj-navigationlist-item-content {
  padding-right: 0.625rem; }

html[dir="rtl"] .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-navigationlist-group-item) .oj-navigationlist-item-content {
  padding-left: 0.625rem; }

html:not([dir="rtl"]) .oj-navigationlist-group-item {
  padding-right: 0.625rem; }

html[dir="rtl"] .oj-navigationlist-group-item {
  padding-left: 0.625rem; }

/*---- End of common styles for collapsible and expanded navigation list ----*/
/* Start of Collapsible Navigation list*/
.oj-navigationlist-collapsible .oj-navigationlist-item-element.oj-collapsed .oj-navigationlist-group {
  max-height: 0; }

/* expand and collapse animation */
.oj-navigationlist-collapsible .oj-navigationlist-collapsible-transition {
  overflow: hidden; }

/* Collapse or expand icon color should not change on hover*/
.oj-navigationlist-item.oj-hover a.oj-navigationlist-collapse-icon,
.oj-navigationlist-item a.oj-navigationlist-collapse-icon,
.oj-navigationlist-item.oj-hover a.oj-navigationlist-expand-icon,
.oj-navigationlist-item a.oj-navigationlist-expand-icon {
  color: #595959; }
  .oj-contrast-marker .oj-navigationlist-item.oj-hover a.oj-navigationlist-collapse-icon, .oj-contrast-marker
  .oj-navigationlist-item a.oj-navigationlist-collapse-icon, .oj-contrast-marker
  .oj-navigationlist-item.oj-hover a.oj-navigationlist-expand-icon, .oj-contrast-marker
  .oj-navigationlist-item a.oj-navigationlist-expand-icon {
    color: #c0c4c8; }

.oj-navigationlist-collapse-icon:focus,
.oj-navigationlist-expand-icon:focus {
  outline: none; }

.oj-navigationlist-focused-element:not(.oj-focus-highlight) {
  outline: none; }

/* End of Collapsible Navigation list*/
.oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item {
  border-style: solid;
  border-radius: 0;
  border-color: #0572ce; }
  html[dir="rtl"] .oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item {
    padding-right: calc(0.625rem - 1px);
    border-width: 0 1px 1px 1px; }
  html:not([dir="rtl"]) .oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item {
    padding-left: calc(0.625rem - 1px);
    border-width: 0 1px 1px 1px; }

.oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item:first-of-type {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px; }
  html[dir="rtl"] .oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item:first-of-type {
    border-top-width: 1px; }
  html:not([dir="rtl"]) .oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item:first-of-type {
    border-top-width: 1px; }

.oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item:last-of-type {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px; }

/*Start of icons only navlist*/
.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item {
  border-style: solid; }
  html[dir="rtl"] .oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item {
    border-width: 0 3px 0 0; }
  html:not([dir="rtl"]) .oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item {
    border-width: 0 0 0 3px; }

html[dir="rtl"] .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-icon {
  padding: 0 calc(10px - 3px) 0 10px; }

html:not([dir="rtl"]) .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-icon {
  padding: 0 10px 0 calc(10px - 3px); }

html[dir="rtl"] .oj-navigationlist-page-level.oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-icon {
  padding: 0 calc(10px - 1px) 0 10px; }

html:not([dir="rtl"]) .oj-navigationlist-page-level.oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-icon {
  padding: 0 10px 0 calc(10px - 1px); }

.oj-navigationlist-page-level.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item {
  border-style: solid;
  border-radius: 0;
  border-color: #0572ce; }
  html[dir="rtl"] .oj-navigationlist-page-level.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item {
    border-width: 0 1px 1px 1px; }
  html:not([dir="rtl"]) .oj-navigationlist-page-level.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item {
    border-width: 0 1px 1px 1px; }

.oj-navigationlist-page-level.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item:first-of-type {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px; }
  html[dir="rtl"] .oj-navigationlist-page-level.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item:first-of-type {
    border-top-width: 1px; }
  html:not([dir="rtl"]) .oj-navigationlist-page-level.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item:first-of-type {
    border-top-width: 1px; }

.oj-navigationlist-page-level.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item:last-of-type {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px; }

.oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-selected {
  background-color: #0572ce; }

.oj-navigationlist-icon-only .oj-navigationlist-item-content {
  -webkit-justify-content: center;
  justify-content: center; }

/*End of icons only navlist*/
.oj-navigationlist-vertical.oj-navigationlist-icon-only {
  display: -webkit-inline-flex;
  display: inline-flex; }

.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item:first-child {
  margin-top: 0; }

/* Start of Page Level navlist styles*/
.oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-selected {
  border-color: #0572ce; }

.oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected {
  background-color: #0572ce; }

.oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-disabled) a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: #0572ce; }
  .oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-disabled) a.oj-navigationlist-item-content .oj-navigationlist-item-label {
    color: #c0c4c8; }

.oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-disabled) .oj-navigationlist-item-icon {
  color: #0572ce; }
  .oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-disabled) .oj-navigationlist-item-icon {
    color: #c0c4c8; }

.oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: #ffffff;
  font-weight: normal; }
  .oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected a.oj-navigationlist-item-content .oj-navigationlist-item-label {
    color: #fafafa; }

.oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
  color: #ffffff; }
  .oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
    color: #fafafa; }

.oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-hover:not(.oj-selected) a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: #fafafa; }

.oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-hover .oj-navigationlist-item-icon {
  color: #85bbe7; }
  .oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-hover .oj-navigationlist-item-icon {
    color: #fafafa; }

.oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-active.oj-hover:not(.oj-selected),
.oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-active:not(.oj-selected) {
  background-color: #daeaf8; }
  .oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-active.oj-hover:not(.oj-selected), .oj-contrast-marker
  .oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-active:not(.oj-selected) {
    background-color: #262628; }

/* End of Page Level navlist styles*/
/*Start of common horizontal navigationlist styles */
.oj-navigationlist-horizontal .oj-navigationlist-element {
  display: -webkit-flex;
  display: flex; }

.oj-navigationlist-horizontal .oj-navigationlist-item {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto; }

@media print, screen {
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-sm-condense .oj-navigationlist-item,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-sm-condense .oj-navigationlist-item {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-sm-justify-content-center .oj-navigationlist-element,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-sm-justify-content-center .oj-navigationlist-element {
    -webkit-justify-content: center;
    justify-content: center; }
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-sm-justify-content-flex-end .oj-navigationlist-element,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-sm-justify-content-flex-end .oj-navigationlist-element {
    -webkit-justify-content: flex-end;
    justify-content: flex-end; } }

@media print, screen and (min-width: 768px) {
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-md-condense .oj-navigationlist-item,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-md-condense .oj-navigationlist-item {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-md-justify-content-center .oj-navigationlist-element,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-md-justify-content-center .oj-navigationlist-element {
    -webkit-justify-content: center;
    justify-content: center; }
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-md-justify-content-flex-end .oj-navigationlist-element,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-md-justify-content-flex-end .oj-navigationlist-element {
    -webkit-justify-content: flex-end;
    justify-content: flex-end; } }

@media print and (orientation: landscape), screen and (min-width: 1024px) {
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-lg-condense .oj-navigationlist-item,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-lg-condense .oj-navigationlist-item {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto; }
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-lg-justify-content-center .oj-navigationlist-element,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-lg-justify-content-center .oj-navigationlist-element {
    -webkit-justify-content: center;
    justify-content: center; }
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-lg-justify-content-flex-end .oj-navigationlist-element,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-lg-justify-content-flex-end .oj-navigationlist-element {
    -webkit-justify-content: flex-end;
    justify-content: flex-end; } }

@media screen and (min-width: 1281px) {
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-xl-condense .oj-navigationlist-item,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-xl-condense .oj-navigationlist-item {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-xl-justify-content-center .oj-navigationlist-element,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-xl-justify-content-center .oj-navigationlist-element {
    -webkit-justify-content: center;
    justify-content: center; }
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-xl-justify-content-flex-end .oj-navigationlist-element,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-xl-justify-content-flex-end .oj-navigationlist-element {
    -webkit-justify-content: flex-end;
    justify-content: flex-end; } }

.oj-navigationlist-horizontal .oj-navigationlist-item-element {
  box-sizing: border-box;
  min-height: 2.75rem; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item-element {
  min-height: 1.8125rem; }

.oj-navigationlist-horizontal .oj-selected > a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: #0572ce; }

.oj-navigationlist-horizontal .oj-navigationlist-item-label {
  -webkit-align-self: center;
  align-self: center; }

.oj-navigationlist-horizontal .oj-navigationlist-item {
  border-color: transparent; }

.oj-navigationlist-horizontal .oj-navigationlist-item.oj-selected {
  border-color: #0572ce; }

.oj-navigationlist-horizontal .oj-navigationlist-item-icon {
  margin: 5px 4px 4px; }

/*End of common horizontal navigationlist styles */
/*Start of  horizontal navigationlist styles icons only*/
html:not([dir="rtl"]) .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item {
  margin-left: 0; }

html[dir="rtl"] .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item {
  margin-right: 0; }

html:not([dir="rtl"]) .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item:first-child {
  margin-left: 0; }

html[dir="rtl"] .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item:first-child {
  margin-right: 0; }

.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item {
  border-width: 0 0 0 0;
  border-style: solid; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-selected {
  background-color: #0572ce; }

/*End of  horizontal navigationlist styles icons only*/
/*Start of  horizontal navigationlist styles excluding icons only*/
.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  border-width: 0 0 0 0;
  border-style: solid; }

.oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  border-style: none; }

.oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-focus,
.oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-hover {
  border-width: 1px;
  border-style: dotted; }

.oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected,
.oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected.oj-focus,
.oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected.oj-hover {
  border-width: 1px;
  border-style: solid; }

.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-content {
  -webkit-justify-content: center;
  justify-content: center;
  padding: 0 0.625rem 0; }

.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-content {
  padding: 0 0.625rem 0; }

.oj-navigationlist-horizontal:not(.oj-navigationlist-stack-icon-label):not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
  -webkit-align-self: center;
  align-self: center; }
  html:not([dir="rtl"]) .oj-navigationlist-horizontal:not(.oj-navigationlist-stack-icon-label):not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
    margin-right: 2px; }
  html[dir="rtl"] .oj-navigationlist-horizontal:not(.oj-navigationlist-stack-icon-label):not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
    margin-left: 2px; }

/*End of  horizontal navigationlist styles excluding icons only*/
/*Start of  horizontal stacked icon label navigationlist styles */
.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label .oj-navigationlist-item-element {
  min-height: 3.0625rem; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label .oj-navigationlist-item-element {
  min-height: 3.9375rem; }

.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label:not(.oj-navigationlist-icon-only) .oj-navigationlist-divider {
  height: 2.714rem; }

.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  padding-bottom: 2px; }

.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-content {
  -webkit-flex-direction: column;
  flex-direction: column; }

/*End of  horizontal stacked icon label navigationlist styles */
/* Start of App Level navbar styles */
.oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item-label {
  font-size: 0.625rem; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item-label {
  font-size: 0.8125rem; }

.oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item:not(.oj-disabled) a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: #595959; }

.oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item:not(.oj-disabled):not(.oj-hover):not(.oj-selected) .oj-navigationlist-item-icon {
  color: #595959; }

.oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-selected a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: #0572ce; }

.oj-navigationlist-app-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
  color: #0572ce; }

.oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover:not(.oj-selected) {
  background-color: transparent; }

.oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover:not(.oj-selected) a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: #85bbe7; }

.oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover .oj-navigationlist-item-icon {
  color: #85bbe7; }

/* End of App Level navbar styles */
/* Start of Page Level navbar styles*/
.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  border-radius: 0;
  border-width: 1px;
  border-color: #0572ce; }
  html:not([dir="rtl"]) .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
    border-right-width: 1px;
    border-left-width: 0; }
  html[dir="rtl"] .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
    border-left-width: 1px;
    border-right-width: 0; }

html:not([dir="rtl"]) .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:first-of-type {
  border-left-width: 1px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px; }

html[dir="rtl"] .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:first-of-type {
  border-right-width: 1px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item {
  border-radius: 0;
  border-width: 1px;
  border-color: #0572ce; }
  html:not([dir="rtl"]) .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item {
    border-right-width: 1px;
    border-left-width: 0; }
  html[dir="rtl"] .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item {
    border-left-width: 1px;
    border-right-width: 0; }

html:not([dir="rtl"]) .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item:first-of-type {
  border-left-width: 1px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px; }

html[dir="rtl"] .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item:first-of-type {
  border-right-width: 1px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px; }

html:not([dir="rtl"]) .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item:last-of-type, html:not([dir="rtl"])
.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:last-of-type {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px; }

html[dir="rtl"] .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item:last-of-type, html[dir="rtl"]
.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:last-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected,
.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected {
  border-color: #0572ce; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected {
  background-color: #0572ce; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-disabled) a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: #0572ce; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item:not(.oj-disabled):not(.oj-hover):not(.oj-selected) .oj-navigationlist-item-icon {
  color: #0572ce; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: #ffffff;
  font-weight: normal; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
  color: #ffffff; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover:not(.oj-selected) a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: #85bbe7; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover .oj-navigationlist-item-icon {
  color: #85bbe7; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-active.oj-hover:not(.oj-selected),
.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-active:not(.oj-selected) {
  background-color: #daeaf8; }

/*End of Page Level navbar styles*/
/*Start of sliding navlist*/
/*Hide siblings of parent node while showing the list*/
.oj-navigationlist-slider .oj-navigationlist-element:not(.oj-navigationlist-current) > .oj-navigationlist-item-element:not(.oj-expanded),
.oj-navigationlist-slider .oj-navigationlist-item-element:not(.oj-expanded) > .oj-navigationlist-group,
.oj-navigationlist-slider .oj-navigationlist-item-element.oj-expanded:not(.oj-navigationlist-current) > .oj-navigationlist-group > .oj-navigationlist-item-element:not(.oj-expanded),
.oj-navigationlist-slider .oj-navigationlist-item-element.oj-expanded > .oj-navigationlist-group-item {
  display: none; }

/* Navlist header in case of sliding */
.oj-navigationlist-toolbar {
  background-color: transparent;
  display: -webkit-flex;
  display: flex;
  line-height: 3.142rem; }
  .oj-contrast-marker .oj-navigationlist-toolbar {
    background-color: transparent; }
  html:not([dir="rtl"]) .oj-navigationlist-toolbar {
    padding-left: 0.714rem; }
  html[dir="rtl"] .oj-navigationlist-toolbar {
    padding-right: 0.714rem; }

/* previous link */
.oj-navigationlist-previous-link {
  -webkit-align-self: center;
  align-self: center;
  -webkit-order: 0;
  order: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis; }

.oj-navigationlist-previous-button {
  -webkit-align-self: center;
  align-self: center;
  margin-bottom: 0; }

a.oj-navigationlist-previous-link:active {
  background-color: transparent; }

/* Override link style */
a.oj-navigationlist-previous-link {
  text-decoration: none;
  outline: none;
  font-weight: normal; }

/* Label for current displayed list */
.oj-navigationlist-current-header {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-order: 1;
  order: 1;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #3a3a3a;
  font-size: 1.25rem; }
  .oj-contrast-marker .oj-navigationlist-current-header {
    color: #fafafa; }

.oj-navigationlist-toolbar-separator {
  -webkit-align-self: center;
  align-self: center;
  border-left: 1px solid #e7e7e9;
  display: inline-block;
  height: 2.642rem;
  vertical-align: middle;
  -webkit-order: 1;
  order: 1; }
  html:not([dir="rtl"]) .oj-navigationlist-toolbar-separator {
    margin: 0.214rem 0 0.214rem 0.714rem; }
  html[dir="rtl"] .oj-navigationlist-toolbar-separator {
    margin: 0.214rem 0.714rem 0.214rem 0; }

.oj-navigationlist-hierarchical-button {
  -webkit-align-self: center;
  align-self: center;
  -webkit-order: 2;
  order: 2;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

/* override oj-button margin for hierarchical menu button*/
.oj-button.oj-navigationlist-hierarchical-button {
  margin: 0 5px; }

html:not([dir="rtl"]) .oj-navigationlist-hierarchical-button.oj-button-icons-only .oj-hier-icon.oj-button-icon.oj-start {
  margin-right: 0.5rem; }

html[dir="rtl"] .oj-navigationlist-hierarchical-button.oj-button-icons-only .oj-hier-icon.oj-button-icon.oj-start {
  margin-left: 0.5rem; }

/* Multiple space elements will be added to dom to get tree style in hierarchical menu  popup*/
.oj-navigationlist-hvitem-space {
  margin-left: 1.142rem; }

/* override menu css*/
.oj-menu-item-icon.oj-navigationlist-level-indicator {
  -webkit-align-self: baseline;
  align-self: baseline;
  padding-bottom: 10px;
  padding-left: 9px;
  margin-bottom: 2px;
  margin-top: 3px;
  width: auto;
  height: auto; }

.oj-navigationlist-hierarchical-menu.oj-menu, .oj-navigationlist-hierarchical-menu .oj-menu {
  padding: 6px 12px;
  font-size: 12px; }

.oj-navigationlist-hierarchical-menu .oj-menu-item a {
  line-height: 12px; }

.oj-navigationlist-hierarchical-menu .oj-menu-item.oj-focus > a,
.oj-navigationlist-hierarchical-menu .oj-menu-item.oj-focus-ancestor > a {
  background: none; }

.oj-navigationlist-hierarchical-menu .oj-menu-item.oj-focus a > .oj-navigationlist-hierarchical-menu-label {
  background-color: #c2ddf7;
  border: 1px solid #0572ce;
  padding: 1px;
  margin-top: 6px;
  margin-bottom: 6px; }

.oj-navigationlist-hierarchical-menu .oj-menu-item a > .oj-navigationlist-hierarchical-menu-label {
  padding: 2px;
  margin-top: 6px;
  margin-bottom: 6px; }

.oj-navigationlist-hierarchical-menu .oj-menu-item a {
  color: #0572ce; }

html:not([dir="rtl"]) .oj-navigationlist-hierarchical-menu .oj-menu-item a,
html:not([dir="ltr"]) .oj-navigationlist-hierarchical-menu .oj-menu-item a {
  padding: 0; }

.oj-navigationlist-hierarchical-button .oj-button-menu-dropdown-icon {
  display: none !important; }

html:not([dir="ltr"]) .oj-navigationlist-hierarchical-menu .oj-menu-item-icon,
html:not([dir="rtl"]) .oj-navigationlist-hierarchical-menu .oj-menu-item-icon {
  margin-left: 4px;
  margin-right: 2px; }

.oj-navigationlist-hierarchical-menu .oj-menu-item-icon {
  position: static;
  -webkit-transform: none;
  transform: none; }

/* end - override menu css*/
.oj-navigationlist-expanded.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
  color: #0572ce; }
  .oj-contrast-marker .oj-navigationlist-expanded.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
    color: #fafafa; }

.oj-menu-item-icon.oj-navigationlist-level-indicator {
  border-bottom: 1px solid #e7e7e9; }
  html:not([dir="rtl"]) .oj-menu-item-icon.oj-navigationlist-level-indicator {
    border-left: 1px solid #e7e7e9; }
  html[dir="rtl"] .oj-menu-item-icon.oj-navigationlist-level-indicator {
    border-right: 1px solid #e7e7e9; }

/* Override  default options*/
.oj-navigationlist-option-defaults {
  font-family: '{"animation":{"add":[{"effect":"expand"},"fadeIn"],"remove":[{"effect":"collapse"},"fadeOut"],"update":{"effect":"fadeIn"},"expand":{"effect":"expand"},"collapse":{"effect":"collapse"},"sliderExpand":{"effect":"slideIn","direction":"start","duration":"400ms"},"sliderCollapse":{"effect":"slideIn","direction":"end","duration":"400ms"},"pointerUp":{"effect":"none"}},"hierarchyMenuDisplayThresholdLevel":-1}'; }

/* Start of Page Level navlist styles*/
.oj-navigationlist-page-level.oj-navigationlist-icon-only .oj-navigationlist-item:not(.oj-hover) .oj-navigationlist-item-icon {
  color: #0572ce; }

.oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-content {
  -webkit-justify-content: center;
  justify-content: center; }

.oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-content .oj-navigationlist-item-label {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

.oj-navigationlist-page-level.oj-navigationlist-expanded.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
  color: #ffffff; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item {
  -webkit-flex: 1 1 0;
  flex: 1 1 0; }

/* End of Page Level navlist styles*/
/*
     * applied to the outer most element of the offcanvas
     */
.oj-offcanvas-outer-wrapper {
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
  width: 100%;
  box-sizing: border-box; }

/*
     * applied to the inner wrapper of the offcanvas in push mode
     */
.oj-offcanvas-inner-wrapper,
.oj-offcanvas-inner-push-wrapper {
  position: relative;
  height: 100%; }

/*
     * only applied to the page level offcanvas
     */
.oj-offcanvas-page > .oj-offcanvas-open {
  position: fixed; }

/*
     * only applied to the outer wrapper of page level offcanvas
     */
.oj-offcanvas-outer-wrapper.oj-offcanvas-page {
  overflow-y: visible; }

/*
     * Transition selector is only applied while the offcanvas is activating.
     * In push mode, it's applied to the inner wrapper of the offcanvas.
     * In overlay mode, it's applied to the offcanvas element.
     */
.oj-offcanvas-transition {
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

/*
     * applied to the outer wrapper when displayMode = pin
     */
.oj-offcanvas-outer-wrapper.oj-offcanvas-pin {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap; }

.oj-offcanvas-pin .oj-offcanvas-start {
  position: relative; }

/*
     * Pin transition selector is only applied to the offcanvas in the pin mode.
     */
.oj-offcanvas-pin-transition {
  min-width: 0;
  -webkit-transition: min-width 0.4s;
  transition: min-width 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.oj-offcanvas-start, .oj-offcanvas-end, .oj-offcanvas-top, .oj-offcanvas-bottom {
  position: absolute;
  box-sizing: border-box;
  border-radius: 0;
  display: none; }

.oj-offcanvas-start, .oj-offcanvas-end {
  height: 100%;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto; }

.oj-offcanvas-top, .oj-offcanvas-bottom {
  width: 100%;
  left: 0;
  right: 0;
  overflow-x: auto;
  overflow-y: hidden; }

/*
     * applied to the offcanvas on the start edge
     */
.oj-offcanvas-start {
  top: 0; }
  html:not([dir="rtl"]) .oj-offcanvas-start {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    left: 0;
    border-width: 0 1px 0 0; }
  html[dir="rtl"] .oj-offcanvas-start {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    right: 0;
    border-width: 0 0 0 1px; }

/*
     * applied to the offcanvas on the end edge
     */
html:not([dir="rtl"]) .oj-offcanvas-end {
  right: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  border-width: 0 0 0 1px; }

html[dir="rtl"] .oj-offcanvas-end {
  left: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  border-width: 0 1px 0 0; }

/*
     * applied to the offcanvas on the top edge
     */
.oj-offcanvas-top {
  border-width: 0 0 1px;
  top: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0); }

/*
     * applied to the offcanvas on the bottom edge
     */
.oj-offcanvas-bottom {
  border-width: 1px 0 0 0;
  bottom: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0); }

/*
     * applied to the offcanvas when it is open
     */
.oj-offcanvas-start.oj-offcanvas-open,
.oj-offcanvas-end.oj-offcanvas-open,
.oj-offcanvas-top.oj-offcanvas-open,
.oj-offcanvas-bottom.oj-offcanvas-open {
  display: block; }

/* 
     * Suppress focus ring
     */
.oj-offcanvas-start:focus,
.oj-offcanvas-end:focus,
.oj-offcanvas-top:focus,
.oj-offcanvas-bottom:focus {
  outline: none; }

.oj-offcanvas-start.oj-focus-highlight,
.oj-offcanvas-end.oj-focus-highlight,
.oj-offcanvas-top.oj-focus-highlight,
.oj-offcanvas-bottom.oj-focus-highlight {
  outline: dotted 1px #000;
  outline: -webkit-focus-ring-color auto; }

/*
     * applied to the offcanvas on the start edge when displayMode is overlay
     */
.oj-offcanvas-overlay.oj-offcanvas-start {
  z-index: 200; }

/*
     * Overlay: start and end offcanvases shift
     */
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-start > .oj-offcanvas-overlay,
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-end > .oj-offcanvas-overlay,
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-start > .oj-offcanvas-inner-wrapper > .oj-offcanvas-overlay,
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-end > .oj-offcanvas-inner-wrapper > .oj-offcanvas-overlay {
  -webkit-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0); }

/*
     * Overlay: top and bottom offcanvases shift
     */
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-down > .oj-offcanvas-overlay,
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-up > .oj-offcanvas-overlay,
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-down > .oj-offcanvas-inner-wrapper > .oj-offcanvas-overlay,
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-up > .oj-offcanvas-inner-wrapper > .oj-offcanvas-overlay {
  -webkit-transform: translate3d(0, 0%, 0);
  transform: translate3d(0, 0%, 0); }

/*
     * Applied to the glass pane of modal offcanvas
     */
.oj-offcanvas-glasspane {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000000;
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

/*
     * glass pane opacity after animation
     */
.oj-offcanvas-glasspane-dim {
  opacity: 0.4; }

/* Override default options*/
.oj-offcanvas-option-defaults {
  font-family: '{"displayMode":"push"}'; }

/*
     * Viewport element for clipping ojModule view host during animation
     * so that the view content doesn't overlap surrounding elements
     */
.oj-animation-host-viewport {
  overflow: hidden; }

/*
     * ojModule view host for holding view content temporarily during animation
     */
.oj-animation-host {
  position: relative;
  width: 100%;
  height: 100%; }

@-webkit-keyframes oj-animation-slidein-left {
  from {
    left: 100%; }
  to {
    left: 0; } }

@keyframes oj-animation-slidein-left {
  from {
    left: 100%; }
  to {
    left: 0; } }

.oj-animation-coverleft.oj-enter, html:not([dir="rtl"]) .oj-animation-coverstart.oj-enter, html[dir="rtl"] .oj-animation-coverend.oj-enter {
  -webkit-animation: oj-animation-slidein-left 0.25s ease-in-out;
  animation: oj-animation-slidein-left 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-slidein-right {
  from {
    left: -100%; }
  to {
    left: 0; } }

@keyframes oj-animation-slidein-right {
  from {
    left: -100%; }
  to {
    left: 0; } }

.oj-animation-coverright.oj-enter, html[dir="rtl"] .oj-animation-coverstart.oj-enter, html:not([dir="rtl"]) .oj-animation-coverend.oj-enter {
  -webkit-animation: oj-animation-slidein-right 0.25s ease-in-out;
  animation: oj-animation-slidein-right 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-slidein-up {
  from {
    top: 100%; }
  to {
    top: 0; } }

@keyframes oj-animation-slidein-up {
  from {
    top: 100%; }
  to {
    top: 0; } }

.oj-animation-coverup.oj-enter {
  -webkit-animation: oj-animation-slidein-up 0.25s ease-in-out;
  animation: oj-animation-slidein-up 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-slideout30-left {
  from {
    left: 0; }
  to {
    left: -30%; } }

@keyframes oj-animation-slideout30-left {
  from {
    left: 0; }
  to {
    left: -30%; } }

.oj-animation-coverleft.oj-leave, html:not([dir="rtl"]) .oj-animation-coverstart.oj-leave, html[dir="rtl"] .oj-animation-coverend.oj-leave {
  -webkit-animation: oj-animation-slideout30-left 0.25s ease-in-out;
  animation: oj-animation-slideout30-left 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-slideout30-right {
  from {
    left: 0; }
  to {
    left: 30%; } }

@keyframes oj-animation-slideout30-right {
  from {
    left: 0; }
  to {
    left: 30%; } }

.oj-animation-coverright.oj-leave, html[dir="rtl"] .oj-animation-coverstart.oj-leave, html:not([dir="rtl"]) .oj-animation-coverend.oj-leave {
  -webkit-animation: oj-animation-slideout30-right 0.25s ease-in-out;
  animation: oj-animation-slideout30-right 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-slideout-left {
  from {
    left: 0; }
  to {
    left: -100%; } }

@keyframes oj-animation-slideout-left {
  from {
    left: 0; }
  to {
    left: -100%; } }

.oj-animation-revealleft.oj-leave, html:not([dir="rtl"]) .oj-animation-revealstart.oj-leave, html[dir="rtl"] .oj-animation-revealend.oj-leave {
  -webkit-animation: oj-animation-slideout-left 0.25s ease-in-out;
  animation: oj-animation-slideout-left 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-slideout-right {
  from {
    left: 0; }
  to {
    left: 100%; } }

@keyframes oj-animation-slideout-right {
  from {
    left: 0; }
  to {
    left: 100%; } }

.oj-animation-revealright.oj-leave, html[dir="rtl"] .oj-animation-revealstart.oj-leave, html:not([dir="rtl"]) .oj-animation-revealend.oj-leave {
  -webkit-animation: oj-animation-slideout-right 0.25s ease-in-out;
  animation: oj-animation-slideout-right 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-slideout-down {
  from {
    top: 0; }
  to {
    top: 100%; } }

@keyframes oj-animation-slideout-down {
  from {
    top: 0; }
  to {
    top: 100%; } }

.oj-animation-revealdown.oj-leave {
  -webkit-animation: oj-animation-slideout-down 0.25s ease-in-out;
  animation: oj-animation-slideout-down 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-slidein30-left {
  from {
    left: 30%; }
  to {
    left: 0; } }

@keyframes oj-animation-slidein30-left {
  from {
    left: 30%; }
  to {
    left: 0; } }

.oj-animation-revealleft.oj-enter, html:not([dir="rtl"]) .oj-animation-revealstart.oj-enter, html[dir="rtl"] .oj-animation-revealend.oj-enter {
  -webkit-animation: oj-animation-slidein30-left 0.25s ease-in-out;
  animation: oj-animation-slidein30-left 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-slidein30-right {
  from {
    left: -30%; }
  to {
    left: 0; } }

@keyframes oj-animation-slidein30-right {
  from {
    left: -30%; }
  to {
    left: 0; } }

.oj-animation-revealright.oj-enter, html[dir="rtl"] .oj-animation-revealstart.oj-enter, html:not([dir="rtl"]) .oj-animation-revealend.oj-enter {
  -webkit-animation: oj-animation-slidein30-right 0.25s ease-in-out;
  animation: oj-animation-slidein30-right 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-zoomin {
  from {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); }
  to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); } }

@keyframes oj-animation-zoomin {
  from {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); }
  to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); } }

.oj-animation-zoomin.oj-enter {
  -webkit-animation: oj-animation-zoomin 0.4s ease-in-out;
  animation: oj-animation-zoomin 0.4s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-zoomout {
  from {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); }
  to {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); } }

@keyframes oj-animation-zoomout {
  from {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); }
  to {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); } }

.oj-animation-zoomout.oj-leave {
  -webkit-animation: oj-animation-zoomout 0.4s ease-in-out;
  animation: oj-animation-zoomout 0.4s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes oj-animation-fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.oj-animation-fade.oj-enter {
  -webkit-animation: oj-animation-fadein 0.4s ease-in-out;
  animation: oj-animation-fadein 0.4s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes oj-animation-fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

.oj-animation-fade.oj-leave {
  -webkit-animation: oj-animation-fadeout 0.4s ease-in-out;
  animation: oj-animation-fadeout 0.4s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.oj-animation-navigate-methods {
  font-family: '{"navChild":"coverStart","navParent":"revealEnd"}'; }

.oj-animation-effect-default-options {
  font-family: '{"fadeIn":{"duration":"0.4s"},"fadeOut":{"duration":"0.4s"},"expand":{"duration":"0.4s"},"collapse":{"duration":"0.4s"},"zoomIn":{"duration":"0.4s"},"zoomOut":{"duration":"0.4s"},"slideIn":{"duration":"0.4s"},"slideOut":{"duration":"0.4s"},"flipIn":{"duration":"0.4s"},"flipOut":{"duration":"0.4s"},"ripple":{"duration":"0.4s"}}'; }

.oj-animation-effect-ripple {
  background-color: #888888;
  opacity: 0.6;
  border-radius: 50%;
  position: absolute;
  width: 140px;
  height: 140px;
  left: 0;
  top: 0; }

/* progressbar */
/* --------------------------------------------------------------- */
oj-progressbar:not(.oj-complete) {
  visibility: hidden; }

.oj-progressbar {
  box-sizing: border-box;
  height: 16px;
  overflow: hidden;
  background: #e2e2e5;
  border: 1px none #c8cfd5;
  border-radius: 0; }

.oj-progressbar-value {
  margin: 0;
  box-sizing: border-box;
  height: 100%;
  background: #0572ce; }

.oj-progressbar-start-label,
.oj-progressbar-end-label {
  display: inline-block;
  margin-top: 8px; }

html:not([dir="rtl"]) .oj-progressbar-end-label {
  float: right; }

html[dir="rtl"] .oj-progressbar-end-label {
  float: left; }

.oj-progressbar-embedded {
  height: 3px;
  width: 100%;
  border-style: none;
  background-color: transparent; }

.oj-hicontrast .oj-progressbar-value {
  border: 1px dashed #c8cfd5; }

.oj-progressbar-overlay {
  height: 100%;
  opacity: 1; }
  html:not([dir="rtl"]) .oj-progressbar-overlay {
    background: url("images/animated-overlay.gif"); }
  html[dir="rtl"] .oj-progressbar-overlay {
    background: url("images/animated-overlay-rtl.gif"); }

/*
     * applied to the refresh panel 
     */
.oj-pulltorefresh-panel {
  overflow: hidden; }

/*
     * applied to the content inside the pull to refresh panel
     */
.oj-pulltorefresh-content {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  background-color: #f6f6f7; }

/*
     * applied animation when the height of the panel changes (during release)
     */
.oj-pulltorefresh-transition {
  transition: height 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

/*
     * applied to the primary text inside the pull to refresh panel
     */
.oj-pulltorefresh-primary-text {
  color: #000;
  text-align: center;
  margin: 0 0 10px 0; }

/*
     * applied to the secondary text inside the pull to refresh panel
     */
.oj-pulltorefresh-secondary-text {
  color: #595959;
  font-size: 0.875rem;
  text-align: center;
  margin: 0 0 20px 0; }

/*
     * applied to the container of the refresh icon inside the pull to refresh panel
     */
.oj-pulltorefresh-icon-container {
  margin: 20px 0 20px 0; }

/*
     * applied to the refresh icon inside the pull to refresh panel
     */
.oj-pulltorefresh-icon {
  width: 40px;
  height: 40px; }

/*
     * refresh icon at initial state
     */
.oj-pulltorefresh-icon-initial:before {
  content: url("images/pull_to_refresh_00.svg"); }

/*
     * refresh icon at 10% state
     */
.oj-pulltorefresh-icon-10-percent:before {
  content: url("images/pull_to_refresh_10.svg"); }

/*
     * refresh icon at 20% state
     */
.oj-pulltorefresh-icon-20-percent:before {
  content: url("images/pull_to_refresh_20.svg"); }

/*
     * refresh icon at 30% state
     */
.oj-pulltorefresh-icon-30-percent:before {
  content: url("images/pull_to_refresh_30.svg"); }

/*
     * refresh icon at 40% state
     */
.oj-pulltorefresh-icon-40-percent:before {
  content: url("images/pull_to_refresh_40.svg"); }

/*
     * refresh icon at 50% state
     */
.oj-pulltorefresh-icon-50-percent:before {
  content: url("images/pull_to_refresh_50.svg"); }

/*
     * refresh icon at 60% state
     */
.oj-pulltorefresh-icon-60-percent:before {
  content: url("images/pull_to_refresh_60.svg"); }

/*
     * refresh icon at 70% state
     */
.oj-pulltorefresh-icon-70-percent:before {
  content: url("images/pull_to_refresh_70.svg"); }

/*
     * refresh icon at 80% state
     */
.oj-pulltorefresh-icon-80-percent:before {
  content: url("images/pull_to_refresh_80.svg"); }

/*
     * refresh icon at 90% state
     */
.oj-pulltorefresh-icon-90-percent:before {
  content: url("images/pull_to_refresh_90.svg"); }

/*
     * refresh icon at 100% state
     */
.oj-pulltorefresh-icon-full:before {
  content: url("images/pull_to_refresh_full.gif"); }

/*
     * Applied to offcanvas when it is in open state 
     */
.oj-swipetoreveal.oj-offcanvas-start.oj-offcanvas-open,
.oj-swipetoreveal.oj-offcanvas-end.oj-offcanvas-open {
  display: -webkit-flex;
  display: flex;
  overflow: hidden; }

/*
     * Applied to action items 
     */
.oj-swipetoreveal-action {
  -webkit-flex: 1;
  flex: 1;
  max-width: 100%;
  text-align: center;
  vertical-align: middle;
  height: 100%;
  overflow: hidden;
  color: #ffffff;
  transition: max-width 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  background-color: #0572ce; }

/*
     * Applied to action items that should be hidden when full trigger occurs
     */
.oj-swipetoreveal .oj-swipetoreveal-hide-when-full {
  max-width: 0; }

/*
     * Applied to the more action item
     */
.oj-swipetoreveal .oj-swipetoreveal-more {
  background-color: #61788b; }

/*
     * Applied to the flag action item
     */
.oj-swipetoreveal .oj-swipetoreveal-flag {
  background-color: #db6134; }

/*
     * Applied to the alert action item
     */
.oj-swipetoreveal .oj-swipetoreveal-alert {
  background-color: #ba0006; }

/* dialog */
/* --------------------------------------------------------------- */
oj-dialog:not(.oj-complete) {
  visibility: hidden; }

/* defines the stacking context of the dialog and for it's children '**/
.oj-dialog-layer {
  z-index: 1050; }

.oj-dialog-layer.oj-focus-within {
  z-index: 1051; }

.oj-dialog {
  overflow: hidden;
  width: 300px;
  min-width: 200px;
  height: auto;
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  background: #ffffff;
  border: 1px solid #e7e7e9;
  border-radius: 12px; }

.oj-dialog-header {
  padding: 1.438rem 0.875rem 0.1875rem;
  background-color: transparent;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-bottom-color: transparent;
  font-size: 1.125rem;
  color: #3a3a3a;
  font-weight: normal;
  position: relative; }

.oj-draggable .oj-dialog-header,
.oj-draggable .oj-dialog-title {
  cursor: move; }

html:not([dir="rtl"]) .oj-dialog-header-close-wrapper {
  margin-right: -0.875rem;
  float: right; }

html[dir="rtl"] .oj-dialog-header-close-wrapper {
  margin-left: -0.875rem;
  float: left; }

.oj-dialog-header-close-wrapper + .oj-dialog-title {
  padding-top: 0.812rem; }

.oj-dialog-header-close-wrapper {
  margin-top: -1.438rem; }

.oj-dialog-title {
  display: block;
  overflow: hidden;
  cursor: default;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.oj-dialog-title {
  text-align: center; }

html:not([dir="rtl"]) .oj-dialog-header-close-wrapper + .oj-dialog-title {
  padding-left: 1.375rem; }

html[dir="rtl"] .oj-dialog-header-close-wrapper + .oj-dialog-title {
  padding-right: 1.375rem; }

html:not([dir="rtl"]) .oj-dialog-header-close-wrapper + .oj-dialog-title {
  padding-right: .2rem; }

html[dir="rtl"] .oj-dialog-header-close-wrapper + .oj-dialog-title {
  padding-left: .2rem; }

.oj-dialog-content > p:last-child {
  margin-bottom: 0; }

.oj-dialog-content {
  overflow: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto; }

.oj-dialog-body {
  position: relative;
  overflow: auto;
  box-sizing: border-box;
  padding: 0.1875rem 0.875rem 0.875rem;
  text-align: center; }

.oj-dialog-footer-separator {
  border-top: 1px solid #d5dfe5; }

.oj-dialog-footer {
  display: flex;
  justify-content: flex-end;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  padding: 0; }
  html:not([dir="rtl"]) .oj-dialog-footer {
    text-align: right; }
  html[dir="rtl"] .oj-dialog-footer {
    text-align: left; }

.oj-dialog-footer .oj-button {
  height: 42px;
  font-weight: 500;
  margin-left: 5px; }

.oj-dialog-footer {
  border-top: 1px solid #d5dfe5; }

.oj-dialog-footer > .oj-button,
.oj-dialog-footer > .oj-button.oj-active,
.oj-dialog-footer > .oj-button.oj-active.oj-focus {
  margin: 0;
  flex: 1; }
  html:not([dir="rtl"]) .oj-dialog-footer > .oj-button, html:not([dir="rtl"])
  .oj-dialog-footer > .oj-button.oj-active, html:not([dir="rtl"])
  .oj-dialog-footer > .oj-button.oj-active.oj-focus {
    border-color: transparent transparent transparent #d5dfe5; }
  html[dir="rtl"] .oj-dialog-footer > .oj-button, html[dir="rtl"]
  .oj-dialog-footer > .oj-button.oj-active, html[dir="rtl"]
  .oj-dialog-footer > .oj-button.oj-active.oj-focus {
    border-color: transparent #d5dfe5 transparent transparent; }

html:not([dir="rtl"]) .oj-dialog-footer > .oj-button:first-child {
  border-left-color: transparent;
  border-radius: 0 0 0 12px; }

html[dir="rtl"] .oj-dialog-footer > .oj-button:first-child {
  border-right-color: transparent;
  border-radius: 0 0 12px 0; }

html:not([dir="rtl"]) .oj-dialog-footer > .oj-button:last-child {
  border-radius: 0 0 12px 0; }

html[dir="rtl"] .oj-dialog-footer > .oj-button:last-child {
  border-radius: 0 0 0 12px; }

.oj-dialog:focus, .oj-dialog-header-close-wrapper:focus {
  outline: none; }

.oj-dialog.oj-focus-highlight,
.oj-dialog-header-close-wrapper.oj-focus-highlight {
  outline: dotted 1px #000;
  outline: -webkit-focus-ring-color auto; }

.oj-dialog-option-defaults {
  font-family: '{"resizeBehavior":"none","cancelBehavior":"none","dragAffordance":"none"}'; }

/* popup */
/* --------------------------------------------------------------- */
oj-popup:not(.oj-complete) {
  visibility: hidden; }

/* defines the stacking context for the popup and its children */
.oj-popup-layer {
  z-index: 1000; }

.oj-popup-layer.oj-focus-within {
  z-index: 1001; }

.oj-popup-layer.oj-popup-tail-simple {
  z-index: 1030; }

.oj-popup-layer.oj-popup-tail-simple.oj-focus-within {
  z-index: 1031; }

.oj-popup {
  border: 1px solid #e7e7e9;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  -webkit-will-change: top, left;
  -ms-will-change: top, left;
  -mos-will-change: top, left; }

.oj-popup.oj-popup-tail-simple {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  border-width: 1px;
  border-color: #e7e7e9;
  background-color: #ffffff;
  -webkit-will-change: top, left, bottom, right;
  -ms-will-change: top, left, bottom, right;
  -mos-will-change: top, left, bottom, right; }

.oj-popup.oj-popup-no-chrome {
  border-width: 0;
  box-shadow: none;
  border-radius: 0;
  background-color: transparent; }

.oj-popup-content {
  padding: 0.5rem; }

.oj-popup-no-chrome > .oj-popup-content {
  padding: 0; }

.oj-popup-tail {
  position: absolute;
  pointer-events: none; }

.oj-popup-tail.oj-popup-tail-simple {
  height: 14px;
  width: 14px;
  font-size: 0; }

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top,
.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle,
.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom {
  left: -14px; }

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom {
  right: -14px; }

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top {
  top: 0; }

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom {
  bottom: 0; }

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle {
  top: 50%; }

.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top,
.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom {
  left: 50%; }

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top:before {
  content: url(""); }

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle:before {
  content: url(""); }

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom:before {
  content: url(""); }

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top:before {
  content: url(""); }

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle:before {
  content: url(""); }

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom:before {
  content: url(""); }

.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top {
  top: -14px; }
  .oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top:before {
    content: url(""); }

.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom {
  bottom: -14px; }
  .oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom:before {
    content: url(""); }

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top:before,
.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle:before,
.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom:before,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top:before,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle:before,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom:before,
.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top:before,
.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom:before {
  display: block; }

.oj-popup-option-defaults {
  font-family: '{"modality":"modal"}'; }

.oj-popup {
  min-width: 70px;
  min-height: 70px; }

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top {
  width: 40px;
  height: 40px;
  left: -14px;
  top: -14px; }

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom {
  width: 40px;
  height: 40px;
  left: -14px;
  bottom: -14px; }

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top {
  width: 40px;
  height: 40px;
  right: -14px;
  top: -14px; }

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom {
  width: 40px;
  height: 40px;
  right: -14px;
  bottom: -14px; }

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle {
  width: 21px;
  height: 44px;
  left: -21px; }

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle {
  width: 21px;
  height: 44px;
  right: -21px; }

.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top {
  width: 44px;
  height: 21px;
  top: -21px; }

.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom {
  width: 44px;
  height: 21px;
  bottom: -21px; }

/* buttonset */
/* --------------------------------------------------------------- */
oj-buttonset:not(.oj-complete) {
  visibility: hidden; }

/* oj-buttonset-multi is present iff it's a multi-button buttonset, which is the only kind of buttonset to which 
       buttonset styling should be applied.  When a single button is wrapped in a buttonset (typically for use with 
       the "checked" option), that's an implementation detail; users still see it as a standalone button, so it 
       should be themed as such. */
.oj-buttonset-multi {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  white-space: nowrap; }

.oj-buttonset-width-equal .oj-buttonset-multi .oj-button,
.oj-buttonset-width-equal.oj-buttonset-multi .oj-button {
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden; }

.oj-buttonset-width-equal .oj-buttonset-multi,
.oj-buttonset-width-equal.oj-buttonset-multi {
  width: 100%; }

.oj-buttonset-width-auto .oj-buttonset-multi .oj-button,
.oj-buttonset-width-auto.oj-buttonset-multi .oj-button {
  -webkit-flex: auto;
  flex: auto; }

.oj-buttonset-multi .oj-button {
  -webkit-flex: auto;
  flex: auto; }

.oj-buttonset-multi.oj-button-full-chrome:not(.oj-buttonset-width-auto) {
  width: 100%; }
  .oj-buttonset-multi.oj-button-full-chrome:not(.oj-buttonset-width-auto) .oj-button {
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden; }

.oj-buttonset-multi.oj-button-outlined-chrome:not(.oj-buttonset-width-auto) {
  width: 100%; }
  .oj-buttonset-multi.oj-button-outlined-chrome:not(.oj-buttonset-width-auto) .oj-button {
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden; }

/* Due to limitations in CSS syntax, the buttonset rules that depend on the chroming level check whether 
       the buttonset itself has .oj-button-XXX-chrome.  This is why we put those classes on the buttonset itself.*/
.oj-buttonset-multi.oj-button-full-chrome .oj-button,
.oj-buttonset-multi.oj-button-outlined-chrome .oj-button {
  border-radius: 0;
  border-right-width: 0;
  margin-left: 0;
  margin-right: 0; }

.oj-buttonset-multi.oj-button-half-chrome .oj-button {
  margin-left: 0;
  margin-right: 0.25em; }

.oj-buttonset-multi.oj-button-half-chrome .oj-buttonset-last {
  margin-right: 0; }

/* .oj-buttonset-first is applied to the first button of the buttonset. */
html:not([dir="rtl"]) .oj-buttonset-multi.oj-button-full-chrome .oj-buttonset-first, html:not([dir="rtl"])
.oj-buttonset-multi.oj-button-outlined-chrome .oj-buttonset-first {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px; }

html[dir="rtl"] .oj-buttonset-multi.oj-button-full-chrome .oj-buttonset-first, html[dir="rtl"]
.oj-buttonset-multi.oj-button-outlined-chrome .oj-buttonset-first {
  border-right-width: 1px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px; }

/* .oj-buttonset-last is applied to the last button of the buttonset. */
html:not([dir="rtl"]) .oj-buttonset-multi.oj-button-full-chrome .oj-buttonset-last, html:not([dir="rtl"])
.oj-buttonset-multi.oj-button-outlined-chrome .oj-buttonset-last {
  border-right-width: 1px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px; }

html[dir="rtl"] .oj-buttonset-multi.oj-button-full-chrome .oj-buttonset-last, html[dir="rtl"]
.oj-buttonset-multi.oj-button-outlined-chrome .oj-buttonset-last {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px; }

html:not([dir="rtl"]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-default, html:not([dir="rtl"])
.oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-focus-only, html:not([dir="rtl"])
.oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-hover, html:not([dir="rtl"])
.oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-disabled {
  border-left-color: #c4ced7; }

html[dir="rtl"] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-default, html[dir="rtl"]
.oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-focus-only, html[dir="rtl"]
.oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-hover, html[dir="rtl"]
.oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-disabled {
  border-left-color: #c4ced7; }

html:not([dir="rtl"]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-active {
  border-left-color: #c4ced7; }

html[dir="rtl"] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-active {
  border-left-color: #c4ced7; }

html:not([dir="rtl"]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-selected {
  border-left-color: #c4ced7; }

html[dir="rtl"] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-selected {
  border-left-color: #c4ced7; }

html:not([dir="rtl"]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-selected.oj-disabled {
  border-left-color: #c4ced7; }

html[dir="rtl"] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-selected.oj-disabled {
  border-left-color: #c4ced7; }

html:not([dir="rtl"]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-first).oj-selected {
  border-left-color: #c4ced7; }

html[dir="rtl"] .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-last).oj-selected {
  border-left-color: #c4ced7; }

html:not([dir="rtl"]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-first).oj-selected.oj-disabled {
  border-left-color: #c4ced7; }

html[dir="rtl"] .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-last).oj-selected.oj-disabled {
  border-left-color: #c4ced7; }

.oj-buttonset-option-defaults {
  font-family: '{"chroming":"outlined"}'; }

/* toolbar*/
/* --------------------------------------------------------------- */
oj-toolbar:not(.oj-complete) {
  visibility: hidden; }

.oj-toolbar {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0.250em 0;
  border-style: solid;
  border-color: #e7e7e9;
  border-width: 0;
  border-radius: 3px; }

.oj-toolbar .oj-button {
  margin-bottom: 0; }

.oj-toolbar > .oj-button,
.oj-toolbar > .oj-buttonset-multi {
  margin-left: 0;
  margin-right: 0.333em; }

.oj-toolbar > .oj-buttonset-last,
.oj-toolbar > .oj-buttonset-multi:last-child {
  margin-right: 0; }

/* Apps can apply this class to a span to get a toolbar separator.  
     * To make it accessible, the span should also have 
     * role="separator" aria-orientation="vertical".
     * Separators should be placed around any buttonsets in the toolbar, and 
     * anywhere else in the toolbar that a separator is desirable.
     */
.oj-toolbar-separator {
  border-left: solid 1px #e7e7e9;
  height: 1.833em;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.167em;
  margin-right: 0.5em; }

/* To layout multiple toolbars, an element with .oj-toolbars can contain 1 or more elements 
       each having .oj-toolbar-row, which can each contain 1 or more JET Toolbars 
       (which have the oj-toolbar class). */
.oj-toolbars {
  border-style: solid;
  border-color: #e7e7e9;
  border-width: 0;
  border-radius: 3px; }

.oj-toolbar-row {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }

.oj-toolbar-row .oj-toolbar {
  display: -webkit-flex;
  display: flex;
  background-color: transparent;
  border: 0; }

.oj-toolbar-row .oj-toolbar + .oj-toolbar {
  border-radius: 0; }
  html:not([dir="rtl"]) .oj-toolbar-row .oj-toolbar + .oj-toolbar {
    border-left: 1px solid #e7e7e9;
    margin-left: 0.5em;
    padding-left: 0.5em; }
  html[dir="rtl"] .oj-toolbar-row .oj-toolbar + .oj-toolbar {
    border-right: 1px solid #e7e7e9;
    margin-right: 0.5em;
    padding-right: 0.5em; }

.oj-toolbar-row + .oj-toolbar-row {
  border-top: 1px solid #e7e7e9; }

/* Apps can apply this class if a top toolbar border is desired */
.oj-toolbar-top-border {
  border-top-width: 1px;
  border-radius: 0; }

/* Apps can apply this class if a bottom toolbar border is desired */
.oj-toolbar-bottom-border {
  border-bottom-width: 1px;
  border-radius: 0; }

.oj-toolbar-option-defaults {
  font-family: '{"chroming":"half"}'; }

/* paging control */
/* --------------------------------------------------------------- */
oj-paging-control:not(.oj-complete) {
  visibility: hidden; }

/* Styling for the component. Set the line-height back to normal in case it 
       was set to 0 by the table/datagrid footer classes */
.oj-pagingcontrol {
  line-height: normal; }

/* Styling for the component content. */
.oj-pagingcontrol-content {
  overflow: hidden; }

/* Styling for the loadMore mode contents. */
.oj-pagingcontrol-loadmore {
  padding: 5px; }
  html:not([dir="rtl"]) .oj-pagingcontrol-loadmore {
    text-align: right; }
  html[dir="rtl"] .oj-pagingcontrol-loadmore {
    text-align: left; }

/* Styling for the Show More link. */
.oj-pagingcontrol-loadmore-link {
  color: #0572ce;
  white-space: nowrap;
  text-decoration: none; }

.oj-pagingcontrol-loadmore-link.oj-hover {
  text-decoration: underline; }

/* Styling for the loadMore mode range. */
.oj-pagingcontrol-loadmore-range {
  padding-left: 10px;
  padding-right: 10px;
  white-space: nowrap; }

/* Styling for the page mode contents. */
.oj-pagingcontrol-nav {
  padding: 5px;
  vertical-align: middle;
  white-space: nowrap; }

/* Styling for the page mode page input section. */
.oj-pagingcontrol-nav-input-section {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap; }
  html:not([dir="rtl"]) .oj-pagingcontrol-nav-input-section {
    padding-right: 5px; }
  html[dir="rtl"] .oj-pagingcontrol-nav-input-section {
    padding-left: 5px; }

/* Styling for the page mode navigation arrows section. */
.oj-pagingcontrol-nav-arrow-section {
  display: inline-block;
  vertical-align: middle; }
  html:not([dir="rtl"]) .oj-pagingcontrol-nav-arrow-section {
    border-left: 1px solid #e7e7e9;
    padding-left: 5px; }
  html[dir="rtl"] .oj-pagingcontrol-nav-arrow-section {
    border-right: 1px solid #e7e7e9;
    padding-right: 5px; }

/* Styling for the page mode navigation arrows section when it is the first child  */
html:not([dir="rtl"]) .oj-pagingcontrol-nav-arrow-section:first-child {
  border-left: 0;
  padding-left: 0; }

html[dir="rtl"] .oj-pagingcontrol-nav-arrow-section:first-child {
  border-right: 0;
  padding-right: 0; }

/* Styling for the page mode page links section. */
.oj-pagingcontrol-nav-pages-section {
  display: table-cell;
  vertical-align: middle;
  line-height: 2.25rem; }

/* Styling for the page mode dot links. */
.oj-pagingcontrol-nav-dot {
  line-height: 1rem;
  padding: 8px 8px;
  display: inline-block;
  outline: none; }

/* Styling for the page mode dot link when focused. */
.oj-pagingcontrol-nav-dot.oj-focus {
  outline: dotted 1px #000;
  outline: -webkit-focus-ring-color auto; }

/* Styling for the page mode dot bullet. */
.oj-pagingcontrol-nav-dot-bullet {
  font-size: 0;
  background-color: #000000;
  border-radius: 50%;
  opacity: 0.2;
  position: relative;
  transition: all 0.3s ease 0s;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  vertical-align: middle; }

/* Styling for the page mode dot bullet when paging control in high contrast mode. */
.oj-hicontrast .oj-pagingcontrol-nav-dot-bullet {
  border: 3px double; }

/* Styling for the page mode dot link when selected. */
.oj-pagingcontrol-nav-dot-bullet.oj-selected {
  background-color: #0572ce;
  content: "";
  opacity: 1; }

/* Styling for the page mode dot link when hovered. */
.oj-pagingcontrol-nav-dot-bullet.oj-hover {
  background-color: #0572ce;
  content: "";
  opacity: 1; }

/* Styling for the page mode page links. */
.oj-pagingcontrol-nav-page {
  color: #0572ce;
  min-width: 1rem;
  padding: 4px 8px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-size: 1rem;
  outline: none; }

.oj-pagingcontrol-nav-page.oj-hover {
  text-decoration: underline; }

/* Styling for the page mode page link when selected. */
.oj-pagingcontrol-nav-page.oj-selected {
  border: 1px solid #3a3a3a;
  display: inline;
  color: #000; }

/* Styling for the page mode page link when disabled. */
.oj-pagingcontrol-nav-page.oj-disabled {
  text-decoration: none; }

/* Styling for the page mode page ellipsis. */
.oj-pagingcontrol-nav-page-ellipsis {
  min-width: 1rem;
  padding: 4px 8px;
  vertical-align: bottom;
  font-size: 1rem; }

/* Styling for the page mode page label. */
.oj-pagingcontrol-nav-label {
  color: #3a3a3a;
  vertical-align: middle;
  font-size: 1rem;
  padding-top: 0.1em; }

/* Styling for the page mode page input element. */
input.oj-pagingcontrol-nav-input {
  text-align: center;
  color: #000;
  background-color: transparent;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  margin: 4px 0 -1px 0;
  min-width: 2.5rem;
  max-width: 2.5rem;
  vertical-align: middle;
  min-height: 2rem;
  max-height: 2rem;
  font-size: 1rem;
  padding-left: 2px;
  padding-right: 2px; }
  input.oj-pagingcontrol-nav-input::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  input.oj-pagingcontrol-nav-input::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  input.oj-pagingcontrol-nav-input:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }

/* Styling for the page mode maximum number of pages text. */
.oj-pagingcontrol-nav-input-max {
  vertical-align: middle;
  color: #3a3a3a;
  font-size: 1rem; }
  html:not([dir="rtl"]) .oj-pagingcontrol-nav-input-max {
    padding-left: 5px; }
  html[dir="rtl"] .oj-pagingcontrol-nav-input-max {
    padding-right: 5px; }

/* Styling for the page mode page range summary. */
.oj-pagingcontrol-nav-input-summary {
  vertical-align: middle;
  color: #3a3a3a;
  font-size: 1rem; }
  html:not([dir="rtl"]) .oj-pagingcontrol-nav-input-summary {
    padding-right: 5px; }
  html[dir="rtl"] .oj-pagingcontrol-nav-input-summary {
    padding-left: 5px; }

/* Styling for the page mode navigation page arrows. */
.oj-pagingcontrol-nav-arrow {
  box-sizing: border-box;
  width: 2.25rem;
  height: 2.25rem;
  display: table-cell;
  vertical-align: middle;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 5px;
  cursor: default; }

/* Styling for the page mode navigation page arrows in hover state. */
.oj-pagingcontrol-nav-arrow.oj-hover {
  background-color: #0683ec;
  border-color: #0683ec;
  color: #ffffff;
  text-decoration: none; }

/* Styling for the page mode navigation page arrows when active. */
.oj-pagingcontrol-nav-arrow.oj-active,
.oj-pagingcontrol-nav-arrow.oj-active.oj-hover {
  color: #ffffff;
  background: #045192;
  border-color: #045192; }

/* Styling for the page mode navigation first page arrow icon. */
/* Styling for the page mode navigation first page arrow icon in vertical orientation. */
/* Styling for the page mode navigation previous page arrow icon. */
/* Styling for the page mode navigation previous page arrow icon in vertical orientation. */
/* Styling for the page mode navigation next page arrow icon. */
/* Styling for the page mode navigation next page arrow icon in vertical orientation. */
/* Styling for the page mode navigation last page arrow icon. */
/* Styling for the page mode navigation last page arrow icon in vertical orientation. */
/* table */
/* --------------------------------------------------------------- */
oj-table:not(.oj-complete) {
  visibility: hidden; }

/* Component option defaults. */
.oj-table-option-defaults {
  font-family: '{"display":"list"}'; }

/* Styling for the root component element. */
.oj-table {
  position: relative;
  line-height: normal;
  font-size: inherit;
  min-width: 240px;
  min-height: 3.876rem;
  -webkit-tap-highlight-color: transparent;
  margin: 1px; }

/* Grid display styling for the root component element. */
.oj-table.oj-table-grid-display {
  border: 1px solid #e7e7e9;
  background-color: #f8fafd;
  margin: 0; }

/* Styling for the root component element with warning. */
.oj-table.oj-warning {
  border: 1px solid #ffd699; }

/* Styling for the component div container element. */
.oj-table-container {
  display: inline-block;
  vertical-align: top;
  clear: both;
  box-sizing: border-box; }

/* Styling for HTML table element. */
table.oj-table-element {
  box-sizing: border-box;
  width: calc(100% - 1px);
  outline: none;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: inherit; }

/* Styling for the header element. */
.oj-table-header {
  color: #000;
  border-bottom: 1px solid #c8cfd5;
  font-size: inherit;
  overflow: hidden; }

/* Grid display styling for the header element. */
.oj-table-grid-display .oj-table-header {
  background-color: #eef2fd;
  border-bottom: 1px solid #e7e7e9; }

/* Styling for the header row element. */
.oj-table-header-row {
  height: 2.75em;
  font-size: inherit;
  vertical-align: middle; }

/* Grid display or editable table styling for the header row element. */
.oj-table-grid-display .oj-table-header-row,
.oj-table-editable .oj-table-header-row {
  height: calc(1.938rem + 4px); }

/* Styling for the header row element when table is scrollable. */
.oj-table-scroll .oj-table-header-row {
  min-height: 2.75em;
  height: auto; }

/* Grid display or editable table styling for the header row element when table is scrollable. */
.oj-table-scroll .oj-table-grid-display .oj-table-header-row,
.oj-table-scroll .oj-table-editable .oj-table-header-row {
  min-height: calc(1.938rem + 4px);
  height: auto; }

/* Styling for the column header elements. */
.oj-table-column-header-cell {
  font-size: inherit;
  font-weight: normal;
  padding-top: 0.375em;
  padding-bottom: 0.375em;
  float: none;
  white-space: nowrap;
  height: calc(2.75em - 2 * 0.375em);
  line-height: calc(2.75em - 2 * 0.375em);
  text-overflow: ellipsis;
  overflow: hidden;
  box-sizing: content-box; }
  html:not([dir="rtl"]) .oj-table-column-header-cell {
    padding-left: 1em; }
  html[dir="rtl"] .oj-table-column-header-cell {
    padding-right: 1em; }
  html:not([dir="rtl"]) .oj-table-column-header-cell {
    text-align: left; }
  html[dir="rtl"] .oj-table-column-header-cell {
    text-align: right; }

/* Grid display or editable table styling for the column header elements. */
.oj-table-grid-display .oj-table-column-header-cell,
.oj-table-editable .oj-table-column-header-cell {
  height: calc(1.938rem - 2 * 0.375em);
  line-height: calc(1.938rem - 2 * 0.375em); }
  html:not([dir="rtl"]) .oj-table-grid-display .oj-table-column-header-cell, html:not([dir="rtl"])
  .oj-table-editable .oj-table-column-header-cell {
    padding-left: 0.375em;
    padding-right: 0.375em; }
  html[dir="rtl"] .oj-table-grid-display .oj-table-column-header-cell, html[dir="rtl"]
  .oj-table-editable .oj-table-column-header-cell {
    padding-left: 0.375em;
    padding-right: 0.375em; }

/* Styling to remove the right border of the last column header. */
html:not([dir="rtl"]) .oj-table-column-header-cell:last-child {
  border-right: 0; }

html[dir="rtl"] .oj-table-column-header-cell:last-child {
  border-left: 0; }

/* Styling for the vertical grid lines for header cells. */
html:not([dir="rtl"]) .oj-table-column-header-cell.oj-table-vgrid-lines {
  border-right: 1px solid transparent; }

html[dir="rtl"] .oj-table-column-header-cell.oj-table-vgrid-lines {
  border-left: 1px solid transparent; }

/* Styling for the column header elements in selected state when table focused. */
.oj-table.oj-focus .oj-table-column-header-cell.oj-selected {
  background-color: #dae9f5; }

/* Styling for the column header elements in selected state when table not focused. */
.oj-table-column-header-cell.oj-selected {
  background-color: #f6f6e0; }

/* Styling for the column header element in hover state. */
.oj-table-column-header-cell.oj-hover {
  background-color: #d4d4d6; }

/* Styling for the column header element in focused state. */
.oj-table-column-header-cell.oj-focus {
  background-color: #abd3fa; }

/* Styling for the dragged column header element. */
.oj-table-column-header-cell.oj-drag {
  background-color: #d4e1ec;
  color: #9e9e9e; }

/* Styling for the column header drag image. */
.oj-table-column-header-cell-drag-image {
  border: 1px solid silver;
  background-color: #dae9f5; }

/* Styling for the column header drag indicator after a column. */
html:not([dir="rtl"]) .oj-table-column-header-cell.oj-table-column-header-drag-indicator-after {
  border-right: 6px solid #c2eaf3; }

html[dir="rtl"] .oj-table-column-header-cell.oj-table-column-header-drag-indicator-after {
  border-left: 6px solid #c2eaf3; }

/* Styling for the column header drag indicator before a column. */
html:not([dir="rtl"]) .oj-table-column-header-cell.oj-table-column-header-drag-indicator-before {
  border-left: 6px solid #c2eaf3; }

html[dir="rtl"] .oj-table-column-header-cell.oj-table-column-header-drag-indicator-before {
  border-right: 6px solid #c2eaf3; }

/* Styling for the column header element. */
.oj-table-column-header {
  position: relative;
  height: inherit;
  float: none;
  text-overflow: inherit;
  overflow: inherit; }
  html:not([dir="rtl"]) .oj-table-column-header {
    padding-right: 10px; }
  html[dir="rtl"] .oj-table-column-header {
    padding-left: 10px; }

/* Grid display or editable table styling for the column header element. */
html:not([dir="rtl"]) .oj-table-grid-display .oj-table-column-header, html:not([dir="rtl"])
.oj-table-editable .oj-table-column-header {
  padding-right: 0; }

html[dir="rtl"] .oj-table-grid-display .oj-table-column-header, html[dir="rtl"]
.oj-table-editable .oj-table-column-header {
  padding-left: 0; }

/* Styling for the column header text. */
.oj-table-column-header-text {
  display: inline-block;
  height: inherit;
  overflow: inherit;
  text-overflow: inherit;
  vertical-align: top; }
  html:not([dir="rtl"]) .oj-table-column-header-text {
    padding-right: 5px; }
  html[dir="rtl"] .oj-table-column-header-text {
    padding-left: 5px; }

/* Grid display or editable table styling for the column header text. */
.oj-table-grid-display .oj-table-column-header-text,
.oj-table-editable .oj-table-column-header-text {
  padding-right: 0; }

/* Styling for the column header sort ascending element. */
.oj-table-column-header-asc {
  position: absolute;
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: top;
  top: 0; }
  html:not([dir="rtl"]) .oj-table-column-header-asc {
    right: 5px; }
  html[dir="rtl"] .oj-table-column-header-asc {
    left: 5px; }

/* Grid display or editable table styling for the column header sort ascending element. */
.oj-table-grid-display .oj-table-column-header-asc,
.oj-table-editable .oj-table-column-header-asc {
  top: -2px; }
  html:not([dir="rtl"]) .oj-table-grid-display .oj-table-column-header-asc, html:not([dir="rtl"])
  .oj-table-editable .oj-table-column-header-asc {
    right: -5px; }
  html[dir="rtl"] .oj-table-grid-display .oj-table-column-header-asc, html[dir="rtl"]
  .oj-table-editable .oj-table-column-header-asc {
    left: -5px; }

/* Styling for the column header sort descending element. */
.oj-table-column-header-dsc {
  position: absolute;
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: top;
  top: -2px;
  top: 0; }
  html:not([dir="rtl"]) .oj-table-column-header-dsc {
    right: 5px; }
  html[dir="rtl"] .oj-table-column-header-dsc {
    left: 5px; }

/* Grid display or editable table styling for the column header sort descending element. */
.oj-table-grid-display .oj-table-column-header-dsc,
.oj-table-editable .oj-table-column-header-dsc {
  top: -2px; }
  html:not([dir="rtl"]) .oj-table-grid-display .oj-table-column-header-dsc, html:not([dir="rtl"])
  .oj-table-editable .oj-table-column-header-dsc {
    right: -5px; }
  html[dir="rtl"] .oj-table-grid-display .oj-table-column-header-dsc, html[dir="rtl"]
  .oj-table-editable .oj-table-column-header-dsc {
    left: -5px; }

/* Styling for the column header sort ascending element in disabled state. */
.oj-table-column-header-asc.oj-disabled {
  display: none; }

/* Styling for the column header sort descending element in disabled state. */
.oj-table-column-header-dsc.oj-disabled {
  display: none; }

/* Styling for the column header sort icons. */
.oj-table-column-header-asc-icon,
.oj-table-column-header-dsc-icon {
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  position: absolute;
  margin-top: -2px;
  text-decoration: none; }
  html:not([dir="rtl"]) .oj-table-column-header-asc-icon, html:not([dir="rtl"])
  .oj-table-column-header-dsc-icon {
    left: 0; }
  html[dir="rtl"] .oj-table-column-header-asc-icon, html[dir="rtl"]
  .oj-table-column-header-dsc-icon {
    right: 0; }

/* Styling for the column header sort icons in hover state. */
.oj-table-column-header-asc-icon.oj-hover,
.oj-table-column-header-dsc-icon.oj-hover {
  text-decoration: none; }

/* Icon for column header sort ascending in enabled state. */
/* Icon for column header sort ascending in disabled state. */
.oj-table-column-header-asc-icon.oj-disabled {
  visibility: hidden; }

/* Icon for column header sort descending */
/* Icon for column header sort descending in disabled state. */
.oj-table-column-header-dsc-icon.oj-disabled {
  visibility: hidden; }

/* Styling for the data body element. */
.oj-table-body {
  color: #000;
  border-width: 0 0 1px;
  border-color: #e7e7e9;
  border-style: solid;
  font-size: inherit; }

/* Grid display styling for the data body element. */
.oj-table-grid-display .oj-table-body {
  background-color: #ffffff;
  border: 0; }

/* Styling for the data row elements. */
.oj-table-body-row {
  height: 2.75em;
  font-size: inherit; }

/* Grid display or editable table styling for the data row elements. */
.oj-table-grid-display .oj-table-body-row,
.oj-table-editable .oj-table-body-row {
  height: calc(1.938rem + 4px); }

/* Styling for the data row elements in hover state. */
.oj-table-body-row.oj-hover {
  background-color: #ebeced; }

/* Styling for the data row drag indicator before a row. */
.oj-table-body-row-drag-indicator-before {
  height: 1.938rem;
  background-color: #c2eaf3; }

/* Styling for the data row drag indicator after a row. */
.oj-table-body-row-drag-indicator-after {
  height: 1.938rem;
  background-color: #c2eaf3; }

/* Styling for the selection affordance icon on touch devices*/
.oj-table-body-row-touch-selection-affordance-top-icon,
.oj-table-body-row-touch-selection-affordance-bottom-icon {
  border-radius: 50%;
  border: 2px solid #0572ce;
  border: 2px solid rgba(5, 114, 206, 0.8);
  box-sizing: border-box;
  background-color: #85bbe7;
  position: absolute;
  width: 11px;
  height: 11px;
  z-index: 1;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; }

/* Styling for the selection affordance touchable area on touch devices*/
.oj-table-body-row-touch-selection-affordance-touch-area {
  width: 24px;
  height: 24px;
  position: absolute; }

/* Styling for the data cell elements. */
.oj-table-data-cell {
  font-size: inherit;
  font-weight: normal;
  min-width: 1rem;
  min-height: 1rem;
  padding-top: 0.375em;
  padding-bottom: 0.375em;
  padding-left: 1em;
  padding-right: 1em;
  float: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: content-box; }
  html:not([dir="rtl"]) .oj-table-data-cell {
    text-align: left; }
  html[dir="rtl"] .oj-table-data-cell {
    text-align: right; }

/* Grid display or editable table styling for the data cell elements. */
.oj-table-grid-display .oj-table-data-cell,
.oj-table-editable .oj-table-data-cell {
  padding-left: 0.375em;
  padding-right: 0.375em;
  height: calc(1.938rem - 11px); }

/* Edit row styling for data cell elements. */
.oj-table-body-row-edit .oj-table-data-cell:not(.oj-read-only) {
  padding: 0; }

/* Edit row styling for data cell elements. */
.oj-table-data-cell.oj-table-data-cell-edit {
  outline: 1px dotted #000000; }

/* Styling on read only table cells, oj-readOnly must be applied by the application */
.oj-table-data-cell.oj-read-only {
  background-color: #f6f6f7; }

/* A helper class oj-table-data-cell-no-padding should have padding 0*/
.oj-table-data-cell.oj-table-data-cell-no-padding {
  padding: 0; }

/* A helper class oj-table-data-cell-padding should be applied to editable components that should maintain padding in edit mode*/
.oj-table-body-row-edit .oj-table-data-cell.oj-table-data-cell-padding {
  padding: 0.375em; }

/* Styling for the dragged data cell elements. */
.oj-table-data-cell.oj-drag {
  background-color: #eef2fd;
  color: #9e9e9e; }

/* Styling for the data cell elements in selected state when table focused. */
.oj-table.oj-focus .oj-table-data-cell.oj-selected {
  background-color: #dcdcde; }

/* Styling for the data cell elements in selected state when table in high contrast mode. */
.oj-hicontrast .oj-table-data-cell.oj-selected {
  border: 3px double; }

/* Styling for the data cell elements in selected state when table not focused. */
.oj-table-data-cell.oj-selected {
  background-color: #dcdcde; }

/* Styling for the data cell elements in focused state. */
.oj-table-data-cell.oj-focus {
  background-color: #dcdcde; }

/* Styling for the data cell elements in focus state when table in high contrast mode. */
.oj-hicontrast .oj-table-data-cell.oj-focus {
  outline-width: 2px;
  outline-style: dotted; }

/* Styling on form controls stamped inside a table */
.oj-table-data-cell.oj-form-control-inherit .oj-form-control {
  height: calc(1.938rem + 4px); }
  .oj-table-data-cell.oj-form-control-inherit .oj-form-control .oj-inputtext-input,
  .oj-table-data-cell.oj-form-control-inherit .oj-form-control .oj-inputtext-nocomp,
  .oj-table-data-cell.oj-form-control-inherit .oj-form-control .oj-inputpassword-input,
  .oj-table-data-cell.oj-form-control-inherit .oj-form-control .oj-inputpassword-nocomp,
  .oj-table-data-cell.oj-form-control-inherit .oj-form-control .oj-textarea-input,
  .oj-table-data-cell.oj-form-control-inherit .oj-form-control .oj-textarea-nocomp,
  .oj-table-data-cell.oj-form-control-inherit .oj-form-control .oj-inputnumber-input,
  .oj-table-data-cell.oj-form-control-inherit .oj-form-control .oj-inputsearch-input,
  .oj-table-data-cell.oj-form-control-inherit .oj-form-control .oj-select .oj-select-choice,
  .oj-table-data-cell.oj-form-control-inherit .oj-form-control .oj-select .oj-select-choices,
  .oj-table-data-cell.oj-form-control-inherit .oj-form-control .oj-combobox .oj-combobox-choice,
  .oj-table-data-cell.oj-form-control-inherit .oj-form-control .oj-combobox .oj-combobox-choices,
  .oj-table-data-cell.oj-form-control-inherit .oj-form-control .oj-inputdatetime .oj-inputdatetime-input {
    padding: 0 calc(0.375em + 1px); }

.oj-table-data-cell .oj-checkboxset .oj-checkbox-label {
  justify-content: flex-end; }

/* Styling for the footer. */
.oj-table-footer {
  border-top: 1px solid #c8cfd5;
  font-size: inherit;
  overflow: hidden; }

/* Grid display styling for the footer. */
.oj-table-grid-display .oj-table-footer {
  background-color: #eef2fd;
  border-top: 1px solid #e7e7e9; }

/* Styling for the footer row. */
.oj-table-footer-row {
  height: 2.75em;
  font-size: inherit; }

/* Grid display or editable table styling for the footer row. */
.oj-table-grid-display .oj-table-footer-row,
.oj-table-editable .oj-table-footer-row {
  height: calc(1.938rem + 4px); }

/* Styling for the footer row when table is scrollable. */
.oj-table-scroll .oj-table-footer-row {
  min-height: 2.75em;
  height: auto; }

/* Grid display or editable table styling for the footer row when table is scrollable. */
.oj-table-scroll .oj-table-grid-display .oj-table-footer-row,
.oj-table-scroll .oj-table-editable .oj-table-footer-row {
  min-height: calc(1.938rem + 4px);
  height: auto; }

/* Styling for the footer cells. */
.oj-table-footer-cell {
  float: none;
  padding-top: 0.375em;
  padding-bottom: 0.375em;
  padding-left: 1em;
  padding-right: 1em;
  font-size: inherit;
  box-sizing: content-box; }

/* Grid display or editable table styling for the footer cells. */
.oj-table-grid-display .oj-table-footer-cell,
.oj-table-editable .oj-table-footer-cell {
  padding-left: 0.375em;
  padding-right: 0.375em; }

/* Styling for the vertical grid lines for data cells. */
html:not([dir="rtl"]) .oj-table-data-cell.oj-table-vgrid-lines {
  border-right: 1px solid #d5dfe5; }

html[dir="rtl"] .oj-table-data-cell.oj-table-vgrid-lines {
  border-left: 1px solid #d5dfe5; }

/* Styling to remove the right border of the last vertical grid line. */
html:not([dir="rtl"]) .oj-table-vgrid-lines:last-child {
  border-right: 0; }

html[dir="rtl"] .oj-table-vgrid-lines:last-child {
  border-left: 0; }

/* Grid display styling for the vertical grid lines. */
html:not([dir="rtl"]) .oj-table-grid-display .oj-table-vgrid-lines, html:not([dir="rtl"])
.oj-table-grid-display .oj-table-column-header-cell.oj-table-vgrid-lines {
  border-right: 1px solid #d5dfe5; }

html[dir="rtl"] .oj-table-grid-display .oj-table-vgrid-lines, html[dir="rtl"]
.oj-table-grid-display .oj-table-column-header-cell.oj-table-vgrid-lines {
  border-left: 1px solid #d5dfe5; }

/* Styling for the horizontal grid lines. */
.oj-table-hgrid-lines {
  border-bottom: 1px solid #d5dfe5; }

/* Styling for the inline message. */
.oj-table-inline-message {
  padding: 10px;
  position: absolute; }

/* Styling for the inline message with warning. */
.oj-table-inline-message.oj-warning {
  background-color: #fff2de;
  border: 1px solid #ffeaca;
  border-top-width: 0; }

/* Styling for the status message. */
.oj-table-status-message {
  background-color: #f8fafd;
  position: absolute; }

/* Styling for the status message text. */
.oj-table-status-message-text {
  background-color: InfoBackground;
  color: InfoText;
  border: 1px #d5dfe5 solid;
  padding: 0.375em;
  display: inline-block; }

/* Styling for the No Data message. */
.oj-table-no-data-message {
  color: #000;
  padding: 0.375em; }

/* Styling for a panel that can attach to the bottom of the table 
       and match the table colors. An app developer can put a paging control
       in a div with this class, for example. */
/* Styling for a panel that can attach to the bottom of the table 
       and match the table colors when table is in grid display. An app developer 
       can put a paging control in a div with this class, for example. */
.oj-table-panel-bottom-grid-display {
  border-style: solid;
  border-color: #e7e7e9;
  border-width: 0 1px 1px;
  background-color: #f8fafd; }

/* tree */
/* --------------------------------------------------------------- */
oj-tree:not(.oj-complete) {
  visibility: hidden; }

/*  Base style for tree and nodes  */
.oj-tree-list,
.oj-tree-list ul,
.oj-tree-node {
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none; }

/*  Basic node  */
.oj-tree-node {
  min-height: 1.833em;
  white-space: nowrap;
  min-width: 18px;
  vertical-align: middle; }
  html:not([dir="rtl"]) .oj-tree-node {
    margin-left: 18px; }
  html[dir="rtl"] .oj-tree-node {
    margin-right: 18px; }

/*  First level nodes are not indented  */
html:not([dir="rtl"]) .oj-tree-list > .oj-tree-node {
  margin-left: 0; }

html[dir="rtl"] .oj-tree-list > .oj-tree-node {
  margin-right: 0; }

/* Allow some extra space before the top child of a parent */
.oj-tree-list ul > li:first-child {
  margin-top: 4px; }

/*  Node anchor */
.oj-tree-list a {
  box-sizing: content-box;
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  margin: 0;
  vertical-align: middle; }

/*  No focus effect */
.oj-tree-list a:focus {
  outline: none; }

/*  Tree icon (node, disclosure)  */
.oj-tree-icon {
  display: inline-block;
  text-decoration: none;
  width: 16px;
  height: 16px;
  vertical-align: middle; }
  html:not([dir="rtl"]) .oj-tree-icon {
    margin-left: 0.250em;
    margin-right: 0; }
  html[dir="rtl"] .oj-tree-icon {
    margin-right: 0.250em; }

/*  Node icon  */
.oj-tree-node-icon {
  cursor: default; }

/*  Disclosure icon  */
.oj-tree-disclosure-icon {
  cursor: pointer; }

/*  Default expanded parent image */
/*  Default collapsed parent image  */
/*  Default leaf node image */
/*  Animated node "loading" icon  */
.oj-tree-loading .oj-tree-icon,
.oj-collapsed a.oj-tree-loading > .oj-tree-node-icon.oj-tree-icon {
  background-repeat: no-repeat;
  background-image: none;
  vertical-align: middle; }

/*  No node icons to be displayed, option icons:false */
.oj-tree-no-icons .oj-tree-node-icon {
  display: none; }

/*  Disabled  */
.oj-tree-list.oj-disabled .oj-tree-disclosure-icon,
.oj-tree-node.oj-disabled {
  color: #9e9e9e;
  cursor: default; }

/*  Collapsed node children */
.oj-tree-node.oj-collapsed > ul {
  display: none; }

/*  Node text */
.oj-tree-title {
  border: 1px solid transparent;
  color: #0572ce;
  cursor: pointer;
  vertical-align: -0.15rem; }
  html:not([dir="rtl"]) .oj-tree-title {
    margin-left: 0.250em; }
  html[dir="rtl"] .oj-tree-title {
    margin-right: 0.250em; }

/*  Active node text  */
.oj-hover .oj-tree-title {
  border: 1px dashed #4f4f4f;
  background-color: transparent; }

/*  Selected node text  */
.oj-selected .oj-tree-title {
  border: 1px solid #c2ddf7;
  background-color: #c2ddf7;
  font-weight: bold; }

/*  Selected inactive node text  */
.oj-selected.oj-tree-inactive .oj-tree-title {
  border: 1px solid #bfd4e5;
  background-color: #dcdcde; }

/*  active and selected node text  */
.oj-hover.oj-selected .oj-tree-title {
  background-color: #c2ddf7;
  border: 1px solid #0572ce;
  font-weight: bold; }

/*  Cursor over invalid drop target  */
.oj-tree-node.oj-invalid-drop .oj-tree-title,
.oj-tree-node.oj-invalid-drop .oj-tree-icon,
.oj-tree.oj-invalid-drop {
  cursor: no-drop; }

/*  Node dragged text (DnD reorder) */
.oj-tree-title.oj-drag {
  position: absolute; }

/* transition properties and duration  */
.oj-tree-transition {
  transition: max-height 0.4s; }

/* DnD reorder insert position pointer container */
.oj-tree-drop-marker {
  position: absolute;
  display: none;
  background-color: transparent; }

/*  DnD reorder insert position icon font  */
.oj-tree-drop-marker-icon {
  height: 12px;
  width: 8px;
  display: inline-block;
  text-decoration: none;
  color: #0572ce; }

/*  DnD reorder insert position pointer line when dropping between nodes  */
.oj-tree-drop-marker-line {
  height: 1px;
  width: 100px;
  position: absolute;
  display: none;
  background-color: #0572ce; }

/* Styling for a collapsed icon */
/* Styling for an expanded icon */
/*  Drag/Drop insert pointer icon */
oj-data-grid:not(.oj-complete) {
  visibility: hidden; }

/* Styling for the datagrid widget container */
.oj-datagrid {
  position: relative;
  border: 1px solid #e7e7e9;
  box-sizing: border-box;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #f8fafd;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  cursor: default; }

/* Styling to remove focus ring border on focusable elements */
.oj-datagrid:focus,
.oj-datagrid-cell:focus,
.oj-datagrid-header-cell:focus,
.oj-datagrid-end-header-cell:focus,
.oj-datagrid-row:focus,
.oj-datagrid-scrollers:focus,
.oj-datagrid-databody:focus {
  outline: none; }

/* The default column width should be set here*/
.oj-datagrid-cell,
.oj-datagrid-column-header-cell,
.oj-datagrid-column-end-header-cell {
  width: 4.166em; }

/* Styling on rows, the default row height should be set here*/
.oj-datagrid-row {
  position: absolute;
  box-sizing: border-box;
  height: calc(1.938rem + 1px); }

/* Styling on the row header and row end header containere*/
.oj-datagrid-row-header,
.oj-datagrid-row-end-header {
  box-sizing: border-box; }

/* Styling on the column header and column end header container*/
.oj-datagrid-column-header,
.oj-datagrid-column-end-header {
  box-sizing: border-box; }

/* Style for disabling horizontal gridlines on cells */
.oj-datagrid-cell.oj-datagrid-border-horizontal-none,
.oj-datagrid-header-cell.oj-datagrid-border-horizontal-none,
.oj-datagrid-end-header-cell.oj-datagrid-border-horizontal-none {
  border-bottom-color: transparent; }

/* Style for disabling horizontal gridlines on corners, is the top border for corners */
.oj-datagrid-row-header-spacer.oj-datagrid-border-horizontal-none,
.oj-datagrid-bottom-corner.oj-datagrid-border-horizontal-none {
  border-top-color: transparent; }

/* Style for disabling vertical gridlines */
html:not([dir="rtl"]) .oj-datagrid-cell.oj-datagrid-border-vertical-none, html:not([dir="rtl"])
.oj-datagrid-header-cell.oj-datagrid-border-vertical-none, html:not([dir="rtl"])
.oj-datagrid-end-header-cell.oj-datagrid-border-vertical-none {
  border-right-color: transparent; }

html[dir="rtl"] .oj-datagrid-cell.oj-datagrid-border-vertical-none, html[dir="rtl"]
.oj-datagrid-header-cell.oj-datagrid-border-vertical-none, html[dir="rtl"]
.oj-datagrid-end-header-cell.oj-datagrid-border-vertical-none {
  border-left-color: transparent; }

/* Style for disabling vertical gridlines on corners, is the opposite of cell sides */
html:not([dir="rtl"]) .oj-datagrid-column-header-spacer.oj-datagrid-border-vertical-none, html:not([dir="rtl"])
.oj-datagrid-bottom-corner.oj-datagrid-border-vertical-none {
  border-left-color: transparent; }

html[dir="rtl"] .oj-datagrid-column-header-spacer.oj-datagrid-border-vertical-none, html[dir="rtl"]
.oj-datagrid-bottom-corner.oj-datagrid-border-vertical-none {
  border-right-color: transparent; }

/* Style for grid border if the grid doesn't fill the container the end headers need a border-bottom */
.oj-datagrid .oj-datagrid-row-header-spacer.oj-datagrid-small-content-border-horizontal,
.oj-datagrid .oj-datagrid-bottom-corner.oj-datagrid-small-content-border-horizontal,
.oj-datagrid .oj-datagrid-end-header-cell.oj-datagrid-small-content-border-horizontal {
  border-bottom-width: 1px; }

/* Style for disabling vertical gridlines */
html:not([dir="rtl"]) .oj-datagrid-column-header-spacer.oj-datagrid-small-content-border-vertical, html:not([dir="rtl"])
.oj-datagrid-bottom-corner.oj-datagrid-small-content-border-vertical, html:not([dir="rtl"])
.oj-datagrid-end-header-cell.oj-datagrid-small-content-border-vertical {
  border-right-width: 1px; }

html[dir="rtl"] .oj-datagrid-column-header-spacer.oj-datagrid-small-content-border-vertical, html[dir="rtl"]
.oj-datagrid-bottom-corner.oj-datagrid-small-content-border-vertical, html[dir="rtl"]
.oj-datagrid-end-header-cell.oj-datagrid-small-content-border-vertical {
  border-left-width: 1px; }

/* Styling on header cells both for rows and columns, start and end */
.oj-datagrid-header-cell,
.oj-datagrid-end-header-cell {
  position: absolute;
  font-size: 1rem;
  font-weight: normal;
  color: #000;
  background-color: #eef2fd;
  border-style: solid;
  border-color: #e7e7e9; }

/* Styling on the cells in the column and column end header, the default column header height should be set here*/
.oj-datagrid-column-header-cell,
.oj-datagrid-column-end-header-cell {
  height: calc(1.938rem + 1px);
  box-sizing: border-box;
  text-align: center;
  padding: 0.375em; }

/* Styling on the cells in the column header */
html:not([dir="rtl"]) .oj-datagrid-column-header-cell {
  border-width: 0 1px 1px 0; }

html[dir="rtl"] .oj-datagrid-column-header-cell {
  border-width: 0 0 1px 1px; }

/* Styling on the cells in the column end header */
html:not([dir="rtl"]) .oj-datagrid-column-end-header-cell {
  border-width: 1px 1px 0 0; }

html[dir="rtl"] .oj-datagrid-column-end-header-cell {
  border-width: 1px 0 0 1px; }

/* Styling on row and row end header cells, the default row header width should be set here */
.oj-datagrid-row-header-cell,
.oj-datagrid-row-end-header-cell {
  width: 4.166em;
  box-sizing: border-box;
  border-color: #e7e7e9;
  border-style: solid;
  padding: 0.375em; }

/* Styling on row header cells */
html:not([dir="rtl"]) .oj-datagrid-row-header-cell {
  border-width: 0 1px 1px 0; }

html[dir="rtl"] .oj-datagrid-row-header-cell {
  border-width: 0 0 1px 1px; }

/* Styling on row end header cells */
html:not([dir="rtl"]) .oj-datagrid-row-end-header-cell {
  border-width: 0 0 1px 1px; }

html[dir="rtl"] .oj-datagrid-row-end-header-cell {
  border-width: 0 1px 1px 0; }

/* Styling on databody cells */
.oj-datagrid-cell {
  position: absolute;
  box-sizing: border-box;
  height: 100%;
  font-size: 1rem;
  color: #000;
  background-color: #ffffff;
  border-style: solid;
  border-color: #d5dfe5;
  text-overflow: ellipsis;
  padding: 0.375em; }
  html:not([dir="rtl"]) .oj-datagrid-cell {
    border-width: 0 1px 1px 0;
    text-align: right; }
  html[dir="rtl"] .oj-datagrid-cell {
    border-width: 0 0 1px 1px;
    text-align: left; }

/* Base styling on databody cell outlines when they are focused/edited */
.oj-datagrid-cell.oj-focus::after,
.oj-datagrid-header-cell.oj-focus::after,
.oj-datagrid-end-header-cell.oj-focus::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top: 0; }
  html:not([dir="rtl"]) .oj-datagrid-cell.oj-focus::after, html:not([dir="rtl"])
  .oj-datagrid-header-cell.oj-focus::after, html:not([dir="rtl"])
  .oj-datagrid-end-header-cell.oj-focus::after {
    left: 0; }
  html[dir="rtl"] .oj-datagrid-cell.oj-focus::after, html[dir="rtl"]
  .oj-datagrid-header-cell.oj-focus::after, html[dir="rtl"]
  .oj-datagrid-end-header-cell.oj-focus::after {
    right: 0; }

/* Styling on databody cell outlines when they can be overwritten, to use a background color don't use the after psuedo class */
.oj-datagrid-editable .oj-datagrid-cell.oj-focus::after,
.oj-hicontrast .oj-datagrid.oj-datagrid-editable.oj-focus .oj-datagrid-row .oj-datagrid-cell.oj-focus::after {
  width: calc(100% - 3px);
  height: calc(100% - 3px);
  border: 2px solid #000000; }

/* Styling on databody cells when they are being edited */
.oj-datagrid-editable .oj-datagrid-cell.oj-datagrid-cell-edit,
.oj-hicontrast .oj-datagrid.oj-datagrid-editable.oj-focus .oj-datagrid-row .oj-datagrid-cell.oj-datagrid-cell-edit {
  padding: 0; }

/* Styling on databody cell outlines when they are being edited, to use a background color don't use the after psuedo class */
.oj-datagrid-editable .oj-datagrid-cell.oj-datagrid-cell-edit::after,
.oj-hicontrast .oj-datagrid.oj-datagrid-editable.oj-focus .oj-datagrid-row .oj-datagrid-cell.oj-datagrid-cell-edit::after {
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  border: 1px solid #000000; }

/* A helper class oj-datagrid-editable-no-padding is a helper to provide the appearance of no padding, it has padding to give the border space when in cellNavigation mode*/
html:not([dir="rtl"]) .oj-datagrid .oj-datagrid-cell.oj-datagrid-cell-no-padding {
  padding: 1px 0 0 1px; }

html[dir="rtl"] .oj-datagrid .oj-datagrid-cell.oj-datagrid-cell-no-padding {
  padding: 1px 1px 0 0; }

/* A helper class oj-datagrid-cell-no-padding should have padding 0 otherwise*/
.oj-datagrid-editable .oj-datagrid-cell.oj-datagrid-cell-no-padding {
  padding: 0; }

/* A helper class oj-datagrid-editable-padding should be appleid to editable components that should maintain padding in edit mode*/
.oj-datagrid-editable .oj-datagrid-cell.oj-datagrid-cell-edit.oj-datagrid-cell-padding {
  padding: 0.375em; }

/* Styling on form controls stamped inside a datagrid */
.oj-datagrid-cell.oj-form-control-inherit .oj-inputtext-input,
.oj-datagrid-cell.oj-form-control-inherit .oj-inputtext-nocomp,
.oj-datagrid-cell.oj-form-control-inherit .oj-inputpassword-input,
.oj-datagrid-cell.oj-form-control-inherit .oj-inputpassword-nocomp,
.oj-datagrid-cell.oj-form-control-inherit .oj-textarea-input,
.oj-datagrid-cell.oj-form-control-inherit .oj-textarea-nocomp,
.oj-datagrid-cell.oj-form-control-inherit .oj-inputnumber-input,
.oj-datagrid-cell.oj-form-control-inherit .oj-inputsearch-input,
.oj-datagrid-cell.oj-form-control-inherit .oj-select .oj-select-choice,
.oj-datagrid-cell.oj-form-control-inherit .oj-select .oj-select-choices,
.oj-datagrid-cell.oj-form-control-inherit .oj-combobox .oj-combobox-choice,
.oj-datagrid-cell.oj-form-control-inherit .oj-combobox .oj-combobox-choices,
.oj-datagrid-cell.oj-form-control-inherit .oj-inputdatetime .oj-inputdatetime-input {
  padding: 0 0.375em 2px 0.375em; }

.oj-datagrid-cell .oj-checkboxset .oj-checkbox-label {
  justify-content: flex-end; }

/* Styling on header cell content both for rows and columns, used to properly align content */
.oj-datagrid-header-cell-content {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  white-space: nowrap; }

/* Styling on header and cell default text for vertical alignment, add this class name to headers when using a
            knockout template or custom renderer to bottom align text*/
.oj-datagrid-cell-text,
.oj-datagrid-header-cell-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; }

/* styling to top align outside grouped headers */
.oj-datagrid-header-grouping > :first-child .oj-datagrid-header-cell-text {
  top: 0;
  bottom: auto; }

/* Styling on databody cell content */
.oj-datagrid-cell-content {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  white-space: nowrap; }

/* Styling on row and column banding */
.oj-datagrid-row.oj-datagrid-banded .oj-datagrid-cell,
.oj-datagrid-cell.oj-datagrid-banded {
  background-color: #f6f6f7; }

/* Styling on read only datagrid cells, oj-readOnly must be applied by the application */
.oj-datagrid-row .oj-datagrid-cell.oj-read-only {
  background-color: #f6f6f7; }

/* Styling on row and cell hover */
.oj-datagrid-row.oj-hover .oj-datagrid-cell,
.oj-datagrid-row .oj-datagrid-cell.oj-hover {
  background-color: #ebeced; }

/* Styling on row and cell selection */
.oj-datagrid.oj-focus .oj-datagrid-row.oj-selected .oj-datagrid-cell,
.oj-datagrid.oj-focus .oj-datagrid-cell.oj-selected {
  background-color: #dcdcde; }

/* Styling on row and cell inactive selection (when the grid root is not the focus) */
.oj-datagrid-row.oj-selected .oj-datagrid-cell,
.oj-datagrid-row .oj-datagrid-cell.oj-selected {
  background-color: #dcdcde; }

/* Styling on focused row and cell outlines, to use a background color don't use the after psuedo class */
.oj-datagrid.oj-focus.oj-read-only .oj-datagrid-row.oj-focus-highlight .oj-datagrid-cell::after,
.oj-datagrid.oj-focus.oj-read-only .oj-datagrid-row .oj-datagrid-cell.oj-focus-highlight::after,
.oj-datagrid.oj-focus .oj-datagrid-header-cell.oj-focus-highlight::after,
.oj-datagrid.oj-focus .oj-datagrid-end-header-cell.oj-focus-highlight::after {
  top: 1px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  outline: dotted 1px #000;
  outline: -webkit-focus-ring-color auto; }
  html:not([dir="rtl"]) .oj-datagrid.oj-focus.oj-read-only .oj-datagrid-row.oj-focus-highlight .oj-datagrid-cell::after, html:not([dir="rtl"])
  .oj-datagrid.oj-focus.oj-read-only .oj-datagrid-row .oj-datagrid-cell.oj-focus-highlight::after, html:not([dir="rtl"])
  .oj-datagrid.oj-focus .oj-datagrid-header-cell.oj-focus-highlight::after, html:not([dir="rtl"])
  .oj-datagrid.oj-focus .oj-datagrid-end-header-cell.oj-focus-highlight::after {
    left: 1px; }
  html[dir="rtl"] .oj-datagrid.oj-focus.oj-read-only .oj-datagrid-row.oj-focus-highlight .oj-datagrid-cell::after, html[dir="rtl"]
  .oj-datagrid.oj-focus.oj-read-only .oj-datagrid-row .oj-datagrid-cell.oj-focus-highlight::after, html[dir="rtl"]
  .oj-datagrid.oj-focus .oj-datagrid-header-cell.oj-focus-highlight::after, html[dir="rtl"]
  .oj-datagrid.oj-focus .oj-datagrid-end-header-cell.oj-focus-highlight::after {
    right: 1px; }

.oj-datagrid.oj-focus .oj-datagrid-column-end-header-cell.oj-focus-highlight::after {
  height: calc(100% - 2px); }

.oj-datagrid.oj-focus .oj-datagrid-row-end-header-cell.oj-focus-highlight::after {
  width: calc(100% - 2px); }

/* Styling on focused cell outlines that require and offset for their outline */
.oj-focus-highlight.oj-datagrid-focus-offset::after {
  outline-offset: -2px; }

/* Styling for the data cell elements in selected state when data grid in high contrast mode. */
.oj-hicontrast .oj-datagrid.oj-focus .oj-datagrid-row.oj-selected .oj-datagrid-cell,
.oj-hicontrast .oj-datagrid.oj-focus .oj-datagrid-cell.oj-selected {
  border-width: 3px;
  border-style: double; }

/* Styling on header containers, used for positioning*/
.oj-datagrid-header,
.oj-datagrid-end-header {
  position: absolute;
  overflow: hidden; }

/* Styling on scrollers and databody regions, used for positioning*/
.oj-datagrid-scrollers,
.oj-datagrid-databody {
  position: absolute;
  overflow: auto; }

/* Styling on scroller region, used for positioning*/
.oj-datagrid-scroller {
  position: absolute;
  width: 100%;
  height: 100%; }

/* Styles used to optimize scolling on touch devices used to optimize translate
           3d swiping on touch and engage hardware acceleration, they are not for animation changes*/
.oj-datagrid-scroller-touch {
  transition: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000; }

/* Styling on header cells when hovered both for rows and columns */
.oj-datagrid-header-cell.oj-hover,
.oj-datagrid-end-header-cell.oj-hover {
  background-color: #d4d4d6; }

/* Styling on the status text, such as fetching data */
.oj-datagrid-status {
  position: absolute;
  display: none;
  background-color: #fbfcc5;
  border: 1px #d5dfe5 solid;
  padding: 0.375em;
  top: 50%; }

/* Styling for the empty data grid text, default only used for positioning */
.oj-datagrid-empty-text {
  position: absolute;
  padding: 0.375em; }

/* Styling for the corner between row and column headers and scrollbars */
.oj-datagrid-row-header-spacer,
.oj-datagrid-column-header-spacer,
.oj-datagrid-bottom-corner,
.oj-datagrid-top-corner {
  position: absolute;
  box-sizing: border-box;
  border-color: #e7e7e9;
  border-style: solid; }

/* Styling for the top corner between headers */
html:not([dir="rtl"]) .oj-datagrid-top-corner {
  border-width: 0 1px 1px 0; }

html[dir="rtl"] .oj-datagrid-top-corner {
  border-width: 0 0 1px 1px; }

/* Styling for the corner between scrollbars if present */
.oj-datagrid-bottom-corner {
  background-color: #f8fafd; }
  html:not([dir="rtl"]) .oj-datagrid-bottom-corner {
    border-width: 1px 0 0 1px; }
  html[dir="rtl"] .oj-datagrid-bottom-corner {
    border-width: 1px 1px 0 0; }

/* Styling for the corner between row headers and horizontal scrollbar */
html:not([dir="rtl"]) .oj-datagrid-row-header-spacer {
  border-width: 1px 1px 0 0; }

html[dir="rtl"] .oj-datagrid-row-header-spacer {
  border-width: 1px 0 0 1px; }

/* Styling for the corner between column headers and vertical scrollbar */
html:not([dir="rtl"]) .oj-datagrid-column-header-spacer {
  border-width: 0 0 1px 1px; }

html[dir="rtl"] .oj-datagrid-column-header-spacer {
  border-width: 0 1px 1px 0; }

/* Styling for the sort area around the icon */
.oj-datagrid-sort-icon-container {
  position: absolute;
  box-sizing: border-box;
  display: inline-block;
  width: 25px;
  bottom: 0;
  padding: 0 0.375em 0.375em 0.375em; }
  html:not([dir="rtl"]) .oj-datagrid-sort-icon-container {
    right: 0; }
  html[dir="rtl"] .oj-datagrid-sort-icon-container {
    left: 0; }

/* Styling for the gradient for sort icons in the header */
html:not([dir="rtl"]) .oj-datagrid-sort-icon-container.oj-enabled {
  background-image: -webkit-linear-gradient(left, rgba(238, 242, 253, 0), #eef2fd 40%);
  background-image: linear-gradient(to right, rgba(238, 242, 253, 0), #eef2fd 40%); }

html[dir="rtl"] .oj-datagrid-sort-icon-container.oj-enabled {
  background-image: -webkit-linear-gradient(right, rgba(238, 242, 253, 0), #eef2fd 40%);
  background-image: linear-gradient(to left, rgba(238, 242, 253, 0), #eef2fd 40%); }

/* Styling for the gradient for sort icons on hover in the header */
html:not([dir="rtl"]) .oj-hover .oj-datagrid-sort-icon-container {
  background-image: -webkit-linear-gradient(left, rgba(212, 212, 214, 0), #d4d4d6 40%);
  background-image: linear-gradient(to right, rgba(212, 212, 214, 0), #d4d4d6 40%); }

html[dir="rtl"] .oj-hover .oj-datagrid-sort-icon-container {
  background-image: -webkit-linear-gradient(right, rgba(212, 212, 214, 0), #d4d4d6 40%);
  background-image: linear-gradient(to left, rgba(212, 212, 214, 0), #d4d4d6 40%); }

/* Styling for both the sort icons and click area */
html:not([dir="rtl"]) .oj-datagrid-sort-ascending-icon, html:not([dir="rtl"])
.oj-datagrid-sort-descending-icon {
  float: right; }

html[dir="rtl"] .oj-datagrid-sort-ascending-icon, html[dir="rtl"]
.oj-datagrid-sort-descending-icon {
  float: left; }

/* Styling for disabled sort icons */
.oj-datagrid-sort-ascending-icon.oj-disabled,
.oj-datagrid-sort-descending-icon.oj-disabled {
  display: none; }

/* Styling for the row that is cut during a context menu or CTRL-X cut and paste operation */
.oj-datagrid-row.oj-datagrid-cut .oj-datagrid-cell,
.oj-datagrid-row.oj-datagrid-cut {
  opacity: 0.8; }

/* Styling row and row headers that are draggable */
.oj-datagrid .oj-draggable {
  cursor: move; }

/* Styling for the row that is being moved using drag */
.oj-datagrid-row.oj-drag {
  opacity: 0.8;
  z-index: 1; }

/* Styling all drop targets in the datagrid when dragging rows*/
.oj-datagrid .oj-drop {
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  opacity: .8; }

/* Styling for databody drop targets when dragging rows*/
.oj-datagrid-databody .oj-drop {
  border: 1px solid #c2eaf3;
  background-color: #D9F4FA; }

/* Styling for header drop targets when dragging rows*/
.oj-datagrid-header .oj-drop,
.oj-datagrid-end-header .oj-drop {
  border: 1px solid #D9F4FA;
  background-color: #c2eaf3; }

/* Styling for the selection affordance icon on touch devices*/
.oj-datagrid-touch-selection-affordance-top,
.oj-datagrid-touch-selection-affordance-bottom {
  border-radius: 50%;
  border: 2px solid #0572ce;
  border: 2px solid rgba(5, 114, 206, 0.8);
  box-sizing: border-box;
  background-color: #85bbe7;
  width: 11px;
  height: 11px;
  z-index: 1;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; }

/* Styling for the selection affordance touchable area on touch devices*/
.oj-datagrid-touch-area {
  width: 24px;
  height: 24px;
  position: absolute; }

/* Styling for the sort ascending icon */
/* Styling for the sort descending icon */
oj-row-expander:not(.oj-complete) {
  visibility: hidden; }

/* Styling for the widget */
.oj-rowexpander {
  display: inline-block; }

/* Bottom alignment in datagrid */
.oj-datagrid .oj-rowexpander {
  height: 100%; }

/* Size and position the spacer */
.oj-rowexpander-icon-spacer {
  min-width: 1.5em;
  display: inline-block; }

/* Size and position the touch area */
.oj-rowexpander-touch-area {
  box-sizing: border-box;
  height: 1.5em;
  width: 1.5em;
  padding: .25em; }

/* Data grid specific bottom alignment of touch area */
.oj-datagrid .oj-rowexpander-touch-area {
  position: absolute;
  bottom: 0;
  margin-bottom: calc(-.25em + 1px); }

/* Table specific centered alignment of touch area */
.oj-table .oj-rowexpander-touch-area {
  margin-bottom: -.25em;
  margin-top: -.25em; }

/* Alignment for the leaf, expand, lazyload and collapse icons */
.oj-rowexpander-leaf-icon,
.oj-rowexpander-expand-icon,
.oj-rowexpander-collapse-icon,
.oj-rowexpander-lazyload-icon {
  font-size: 1em;
  outline: none; }

/* Focus border for highlighted icons */
.oj-rowexpander-leaf-icon.oj-focus-highlight,
.oj-rowexpander-expand-icon.oj-focus-highlight,
.oj-rowexpander-collapse-icon.oj-focus-highlight,
.oj-rowexpander-lazyload-icon.oj-focus-highlight {
  outline: dotted 1px #000;
  outline: -webkit-focus-ring-color auto; }

/* Data grid specific absolute icon positioning */
.oj-datagrid .oj-rowexpander-leaf-icon,
.oj-datagrid .oj-rowexpander-expand-icon,
.oj-datagrid .oj-rowexpander-collapse-icon,
.oj-datagrid .oj-rowexpander-lazyload-icon {
  position: absolute; }

/* Styling for the load icon */
.oj-rowexpander-lazyload-icon {
  width: 100%; }

/* Add this class name to your text when stamping a row expander inside of data grid to obtain bottom alignment */
.oj-rowexpander-cell-text {
  position: absolute;
  overflow: hidden;
  bottom: 0; }

.oj-rowexpander-indent {
  display: inline-block; }

/* Set the indentation here depth 1 is one indent level */
.oj-rowexpander-depth-1 {
  width: 16px; }

.oj-rowexpander-depth-2 {
  width: 32px; }

.oj-rowexpander-depth-3 {
  width: 48px; }

.oj-rowexpander-depth-4 {
  width: 64px; }

.oj-rowexpander-depth-5 {
  width: 80px; }

.oj-rowexpander-depth-6 {
  width: 96px; }

.oj-rowexpander-depth-7 {
  width: 112px; }

/* Styling for the expand icon */
/* Styling for the collapse icon */
/* Styling to remove the default underlining of hovered links */
.oj-rowexpander a:hover,
.oj-rowexpander a:focus {
  text-decoration: none; }

oj-list-view:not(.oj-complete) {
  visibility: hidden; }

/* Styling for the listview widget container */
.oj-listview {
  position: relative;
  border-width: 1px 0;
  border-color: #e7e7e9;
  border-style: solid;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  box-sizing: border-box;
  min-height: 1.938rem; }

/* styling for the listview root element and group element */
.oj-listview-element,
.oj-listview-group {
  padding: 0;
  margin: 0;
  list-style-type: none; }

/* Styling to remove focus ring border on focusable elements */
.oj-listview:focus,
.oj-listview-element:focus,
.oj-listview-expand-icon:focus,
.oj-listview-collapse-icon:focus,
.oj-listview-group-item:focus,
.oj-listview-item-element:focus {
  outline: none; }

/* Styling for the component div container element. */
.oj-listview-container {
  overflow: auto; }

/* to enable momentum scrolling on touch devices */
.oj-listview-container-touch {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent; }

/* remove border top for the first group to prevent double border */
.oj-listview-element > .oj-listview-item-element:first-child .oj-listview-group-item {
  border-top: 0; }

/* remove border top for the first group or leaf item to prevent double border */
.oj-listview-element > .oj-listview-item:first-child,
ul:not(.oj-listview-card-layout) .oj-listview-group > .oj-listview-item:first-child,
.oj-listview-element > .oj-listview-item-element:first-child .oj-listview-group-item {
  background-size: 0; }

/* styling on each list item */
/* note that background image is used for border because we need to ability to position the border.
           using linear-gradient allows us to customize the color of the border */
.oj-listview-item {
  padding: 0.5rem;
  background-image: linear-gradient(#d5dfe5, #d5dfe5);
  background-size: 100% 1px;
  background-position: 0 0;
  background-repeat: no-repeat;
  box-sizing: border-box;
  border-top: 1px solid transparent; }

/* set on item before add or remove animation */
.oj-listview-item-add-remove-transition {
  overflow: hidden; }

/* styling on list item element */
.oj-listview-item-element {
  line-height: normal; }

/* Styling on list item hover */
.oj-listview-item.oj-hover {
  background-color: #ebeced;
  border-top: 1px solid #d5dfe5;
  background-size: 0; }

.oj-listview-group-item.oj-hover {
  background-color: #ebeced; }

ul.oj-listview-element:not(.oj-listview-card-layout) .oj-listview-item.oj-hover + li.oj-listview-item {
  border-top: 1px solid #d5dfe5;
  background-size: 0; }

/* Styling on list item selection */
.oj-listview.oj-focus-ancestor .oj-listview-item.oj-selected {
  background-color: #dcdcde;
  border-top: 1px solid #bababc;
  background-size: 0; }

.oj-listview.oj-focus-ancestor .oj-listview-group-item.oj-selected {
  background-color: #dcdcde; }

.oj-listview.oj-focus-ancestor ul.oj-listview-element:not(.oj-listview-card-layout) .oj-listview-item.oj-selected + li.oj-listview-item {
  border-top: 1px solid #bababc;
  background-size: 0; }

/* Styling on list item inactive selection (when the root is not focus) */
.oj-listview-item.oj-selected {
  background-color: #dcdcde;
  border-top: 1px solid #bababc;
  background-size: 0; }

.oj-listview-group-item.oj-selected {
  background-color: #dcdcde; }

/* Styling on focused list or group item */
.oj-listview-item.oj-focus-highlight,
.oj-listview-group-item.oj-focus-highlight {
  position: relative; }

.oj-listview-item.oj-focus-highlight::after,
.oj-listview-group-item.oj-focus-highlight::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 1px);
  outline: dotted 1px #000;
  outline: -webkit-focus-ring-color auto; }
  html:not([dir="rtl"]) .oj-listview-item.oj-focus-highlight::after, html:not([dir="rtl"])
  .oj-listview-group-item.oj-focus-highlight::after {
    left: 1px; }
  html[dir="rtl"] .oj-listview-item.oj-focus-highlight::after, html[dir="rtl"]
  .oj-listview-group-item.oj-focus-highlight::after {
    right: 1px; }

/* Styling on focused list item */
.oj-listview.oj-focus-ancestor ul.oj-listview-element:not(.oj-listview-card-layout) .oj-listview-item.oj-focus,
.oj-listview.oj-focus-ancestor ul.oj-listview-element:not(.oj-listview-card-layout) .oj-listview-item.oj-focus + li.oj-listview-item {
  border-top: 1px solid #bababc;
  background-size: 0; }

/* Styling for the list item elements in selected state when listview is in high contrast mode. */
.oj-hicontrast .oj-listview-item.oj-selected,
.oj-hicontrast .oj-listview-group-item.oj-selected {
  border-width: 1px 2px 2px 1px;
  border-style: solid;
  border-color: initial; }

/* Styling for the list item elements in focus state when listview is in high contrast mode. */
.oj-hicontrast .oj-listview-item.oj-focus-highlight,
.oj-hicontrast .oj-listview-group-item.oj-focus-highlight {
  outline-width: 2px;
  outline-style: dotted;
  border-width: 0 1px 1px 0;
  border-style: dotted; }

/* Styling addition for group items */
.oj-listview-group-item {
  font-weight: bold;
  color: #3a3a3a;
  padding: 0.5rem;
  border: 0 solid #d5dfe5;
  border-width: 0 0 1px;
  font-size: 1rem;
  background-color: #f6f6f7;
  opacity: 1;
  box-sizing: border-box; }
  html[dir="rtl"] .oj-listview-group-item {
    right: 0; }

.oj-listview-item-element.oj-expanded .oj-listview-group-item,
.oj-listview-item-element.oj-collapsed .oj-listview-group-item {
  padding: 3px 0; }

/* Styling for group items when it is in collapsed state, remove bottom border to avoid double border */
.oj-listview-item-element.oj-collapsed .oj-listview-group-item {
  border-bottom: 0; }

/* Styling for group item element that has focus */
.oj-listview-group-item .oj-focus,
.oj-listview-group-item .oj-selected {
  background-color: transparent;
  background-image: none; }

/* Styling for group item element that is pinned when scrolled */
.oj-listview-group-item.oj-pinned {
  position: absolute;
  z-index: 1; }

/* expand and collapse animation */
.oj-listview-collapsible-transition {
  overflow: hidden; }

/* Styling on the status text, such as fetching data */
.oj-listview-status-message {
  position: absolute;
  display: none;
  background-color: #fbfcc5;
  border: 1px #d5dfe5 solid;
  padding: 5px;
  top: 50%; }

/* Styling for the empty list text */
.oj-listview-no-data-message {
  padding: 0.5rem;
  background-color: #ffffff;
  min-height: 1rem; }

/* Alignment for the expand and collapse icons */
.oj-listview-expand-icon,
.oj-listview-collapse-icon {
  padding: 9px;
  outline-offset: -9px; }

/* Styling for group item when card layout is used */
.oj-listview-card-layout .oj-listview-group {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }

/* Styling for item when card layout is used */
.oj-listview-card-layout li.oj-listview-item {
  width: 240px;
  height: auto;
  border: 1px solid #e7e7e9;
  border-radius: 0;
  margin-top: 10px;
  margin-bottom: 10px;
  background-size: 0;
  box-sizing: border-box; }
  html[dir="rtl"] .oj-listview-card-layout li.oj-listview-item {
    margin-right: 0;
    margin-left: 10px; }
  html:not([dir="rtl"]) .oj-listview-card-layout li.oj-listview-item {
    margin-left: 0;
    margin-right: 10px; }

/* Styling for the drill icon */
.oj-listview-drill-icon {
  width: 16px;
  height: 16px;
  color: #bababc; }

/* Styling for the drill icon when item has focus */
.oj-listview.oj-focus-ancestor .oj-listview-item.oj-focus .oj-listview-drill-icon {
  color: #0572ce; }

/* Styling for the drill icon when item is selected */
.oj-listview.oj-focus-ancestor .oj-listview-item.oj-selected .oj-listview-drill-icon {
  color: #0572ce; }

/* Styling for the drill icon when hover over an item */
.oj-listview-item.oj-hover .oj-listview-drill-icon {
  color: #85bbe7; }

/* Styling for the activity indicator for high watermark scrolling */
.oj-listview-loading-icon {
  width: 40px;
  height: 40px;
  margin: auto; }
  .oj-listview-loading-icon:before {
    content: url("images/pull_to_refresh_full.gif"); }

/* Styling for the affordance icon */
.oj-listview-drag-handle {
  width: 28px;
  height: 18px;
  cursor: move; }
  .oj-listview-drag-handle:before {
    content: url("images/move_handle.svg"); }

.oj-listview-drag-handle::before {
  width: inherit;
  height: inherit; }

/* Styling for the affordance icon when card layout is used */
/* Styling for the drag image */
.oj-listview-drag-image {
  background-color: transparent;
  position: fixed;
  top: 10000px;
  border: 1px solid transparent; }

/* Styling for hiding the original item being dragged */
.oj-listview-drag-item {
  display: none; }

/* Styling item that is draggable (no affordance) */
.oj-listview-item.oj-draggable {
  cursor: move; }

/* Styling for the item that is being moved using drag */
.oj-listview-item.oj-drag {
  box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.45);
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent; }

/* Styling all drop targets in the list */
.oj-listview-item.oj-drop {
  box-sizing: border-box;
  border: 1px solid #c2eaf3;
  background-color: #D9F4FA; }

/* Styling on empty list as drop targets in the list */
.oj-listview-empty-text.oj-drop {
  background-color: #D9F4FA; }

/* Styling for an item that is cut during a context menu cut operation */
.oj-listview-cut {
  opacity: 0.8; }

/* note that currently animation is the only option defaults */
.oj-listview-option-defaults {
  font-family: '{"animation":{"add":[{"effect":"expand"},"fadeIn"],"remove":[{"effect":"collapse"},"fadeOut"],"update":{"effect":"fadeIn"},"expand":{"effect":"expand"},"collapse":{"effect":"collapse"},"pointerUp":{"effect":"none"}}}'; }

/* Styling for the expand icon */
/* Styling for the collapse icon */
/* Styling for each list item */
/* the border is position to where the content starts */
.oj-listview-item {
  background-position: 0.5rem 0; }

/* Styling on focused list or group item */
.oj-listview-item.oj-focus,
.oj-listview-group-item.oj-focus {
  outline-style: none; }

/* Styling for drill icon */
/* Styling for drill icon in various states */
.oj-listview-item.oj-hover .oj-listview-drill-icon,
.oj-listview.oj-focus-ancestor .oj-listview-item.oj-focus .oj-listview-drill-icon,
.oj-listview.oj-focus-ancestor .oj-listview-item.oj-selected .oj-listview-drill-icon {
  color: #bababc; }

oj-indexer:not(.oj-complete) {
  visibility: hidden; }

/* Styling for the indexer widget container */
.oj-indexer {
  width: 32px;
  height: 100%; }

/* Styling to remove focus ring border on indexer */
.oj-indexer ul:focus {
  outline: none; }

/* styling for the indexer root element */
.oj-indexer ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

/* styling on each item */
.oj-indexer li {
  text-align: center;
  height: 18px;
  width: 32px;
  line-height: 17px;
  vertical-align: middle;
  color: #0572ce;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.75rem; }

/* styling on each item that does not have a corresponding group header */
.oj-indexer li.oj-disabled {
  opacity: 0.5; }

/* styling on hovered item */
.oj-indexer li:hover {
  text-decoration: none; }

/* styling on focused item */
.oj-indexer.oj-focus-ancestor li.oj-focus-highlight {
  outline-width: 1px;
  outline-style: dotted;
  outline-offset: -1px; }

/* styling on each item when indexer is abbreviated */
.oj-indexer.oj-indexer-abbr li {
  height: 14px; }

/* styling for the ellipsis between two characters */
.oj-indexer-ellipsis:after {
  content: "\25CF"; }

.oj-dvtbase {
  display: block;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s; }

.oj-dvtbase:focus {
  outline: none; }

.oj-dvt-category1 {
  color: #267db3; }

.oj-dvt-category2 {
  color: #68c182; }

.oj-dvt-category3 {
  color: #fad55c; }

.oj-dvt-category4 {
  color: #ed6647; }

.oj-dvt-category5 {
  color: #8561c8; }

.oj-dvt-category6 {
  color: #6ddbdb; }

.oj-dvt-category7 {
  color: #ffb54d; }

.oj-dvt-category8 {
  color: #e371b2; }

.oj-dvt-category9 {
  color: #47bdef; }

.oj-dvt-category10 {
  color: #a2bf39; }

.oj-dvt-category11 {
  color: #a75dba; }

.oj-dvt-category12 {
  color: #f7f37b; }

.oj-dvt-tooltip {
  background-color: #f6f6f7;
  color: #000;
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
  padding: 2px;
  font-size: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }

.oj-dvt-datatip {
  background-color: #f6f6f7;
  color: #000;
  border-style: solid;
  border-color: #000000;
  border-radius: 2px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  border-width: 2px;
  padding: 2px;
  font-size: 0.875rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }

oj-legend:not(.oj-complete) {
  visibility: hidden; }

.oj-legend {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 0.875rem;
  color: #000; }

.oj-legend-title {
  font-size: 0.875rem; }

.oj-legend-section-title {
  font-size: 0.875rem; }

html:not([dir="rtl"]) .oj-legend-section-open-icon {
  background-image: url("../common/images/dvt/legend/open-ena.png"); }

html[dir="rtl"] .oj-legend-section-open-icon {
  background-image: url("../common/images/dvt/legend/open-ena-r.png"); }

html:not([dir="rtl"]) .oj-legend-section-open-icon.oj-hover {
  background-image: url("../common/images/dvt/legend/open-ovr.png"); }

html[dir="rtl"] .oj-legend-section-open-icon.oj-hover {
  background-image: url("../common/images/dvt/legend/open-ovr-r.png"); }

html:not([dir="rtl"]) .oj-legend-section-open-icon.oj-active {
  background-image: url("../common/images/dvt/legend/open-dwn.png"); }

html[dir="rtl"] .oj-legend-section-open-icon.oj-active {
  background-image: url("../common/images/dvt/legend/open-dwn-r.png"); }

html:not([dir="rtl"]) .oj-legend-section-close-icon {
  background-image: url("../common/images/dvt/legend/closed-ena.png"); }

html[dir="rtl"] .oj-legend-section-close-icon {
  background-image: url("../common/images/dvt/legend/closed-ena-r.png"); }

html:not([dir="rtl"]) .oj-legend-section-close-icon.oj-hover {
  background-image: url("../common/images/dvt/legend/closed-ovr.png"); }

html[dir="rtl"] .oj-legend-section-close-icon.oj-hover {
  background-image: url("../common/images/dvt/legend/closed-ovr-r.png"); }

html:not([dir="rtl"]) .oj-legend-section-close-icon.oj-active {
  background-image: url("../common/images/dvt/legend/closed-dwn.png"); }

html[dir="rtl"] .oj-legend-section-close-icon.oj-active {
  background-image: url("../common/images/dvt/legend/closed-dwn-r.png"); }

.oj-legend-title {
  color: #595959; }

.oj-legend-section-title {
  color: #595959; }

oj-chart:not(.oj-complete) {
  visibility: hidden; }

.oj-chart {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 400px;
  height: 300px; }

.oj-chart-select-icon {
  background-image: url("../common/images/dvt/chart/marquee-up.png"); }

.oj-chart-select-icon.oj-active {
  background-image: url("../common/images/dvt/chart/marquee-down.png"); }

.oj-chart-pan-icon {
  background-image: url("../common/images/dvt/chart/pan-up.png"); }

.oj-chart-pan-icon.oj-active {
  background-image: url("../common/images/dvt/chart/pan-down.png"); }

.oj-chart-zoom-icon {
  background-image: url("../common/images/dvt/chart/zoom-up.png"); }

.oj-chart-zoom-icon.oj-active {
  background-image: url("../common/images/dvt/chart/zoom-down.png"); }

.oj-chart-footnote {
  font-size: 0.875rem;
  color: #000; }

.oj-chart-data-label {
  font-size: 0.875rem; }

.oj-chart-subtitle {
  font-size: 1.25rem;
  color: #595959; }

.oj-chart-stock-falling {
  background-color: #ed6647; }

.oj-chart-stock-range {
  background-color: #b8b8b8; }

.oj-chart-stock-rising {
  background-color: #6b6f74; }

.oj-chart-title {
  font-size: 1.25rem;
  color: #3a3a3a;
  font-weight: normal; }

.oj-chart-stack-label {
  font-size: 0.875rem;
  font-weight: normal; }

.oj-chart-pie-center-label,
.oj-chart-xaxis-title,
.oj-chart-yaxis-title,
.oj-chart-y2axis-title {
  font-size: 1rem;
  color: #595959; }

.oj-chart-tooltip-label {
  font-size: 0.875rem;
  color: #3a3a3a; }

.oj-chart-xaxis-tick-label,
.oj-chart-yaxis-tick-label,
.oj-chart-y2axis-tick-label {
  font-size: 0.875rem;
  color: #000; }

oj-spark-chart:not(.oj-complete) {
  visibility: hidden; }

.oj-sparkchart {
  width: 100px;
  height: 18px; }

.oj-sparkchart.oj-focus-highlight {
  outline: dotted 1px #000;
  outline: -webkit-focus-ring-color auto; }

oj-diagram:not(.oj-complete) {
  visibility: hidden; }

.oj-diagram {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 100%;
  height: 400px; }

.oj-diagram-node.oj-hover {
  border-top-color: #ebeced;
  border-bottom-color: #ffffff; }

.oj-diagram-node.oj-selected {
  border-color: #000000; }

.oj-diagram-node-label {
  font-size: 1rem;
  color: #000; }

.oj-diagram-link {
  color: #9bb2c7; }

.oj-diagram-link.oj-hover {
  border-top-color: #ebeced;
  border-bottom-color: #ffffff; }

.oj-diagram-link.oj-selected {
  border-color: #000000; }

.oj-diagram-link-label {
  font-size: 1rem;
  color: #000; }

.oj-diagram .oj-active-drop {
  fill: #D9F4FA;
  fill-opacity: .75; }

.oj-diagram .oj-invalid-drop {
  cursor: no-drop; }

.oj-diagram-node.oj-active-drop {
  fill: #D9F4FA;
  fill-opacity: .75; }

.oj-diagram-node.oj-invalid-drop {
  cursor: no-drop; }

.oj-diagram-link.oj-active-drop {
  stroke: #D9F4FA;
  stroke-opacity: .75; }

.oj-diagram-link.oj-invalid-drop {
  cursor: no-drop; }

oj-gantt:not(.oj-complete) {
  visibility: hidden; }

/* Styling for the gantt widget */
.oj-gantt {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: none; }

/* Styling for the container (around time axis and databody) */
.oj-gantt-container {
  fill: #f8fafd;
  stroke: #e7e7e9;
  stroke-width: 1px; }

/* Styling for the empty text */
.oj-gantt-no-data-message {
  fill: #000;
  font-size: 0.875rem; }

/* Styling for horizontal grid lines */
.oj-gantt-horizontal-gridline {
  stroke: #d5dfe5;
  stroke-width: 1px; }

/* Styling for vertical grid lines */
.oj-gantt-vertical-gridline {
  stroke: #bcc7d2;
  stroke-dasharray: 5,5; }

/* Styling for all rows */
.oj-gantt-row {
  fill: #ffffff; }

/* Styling for all row labels */
.oj-gantt-row-label {
  fill: #3a3a3a;
  font-size: 1rem; }

/* Styling for all task bars */
.oj-gantt-task {
  fill: #267db3; }

/* Styling for all task bars when hover */
.oj-gantt-task.oj-hover {
  stroke-width: 2; }

/* Styling for all task bars when focus */
.oj-gantt-task.oj-focus {
  stroke-width: 2; }

/* Styling for all task bars when selected */
.oj-gantt-task.oj-selected {
  stroke: #000000; }

/* Styling for all task labels */
.oj-gantt-task-label {
  color: #000;
  font-size: 0.875rem; }

/* Styling for the major time axis */
.oj-gantt-major-axis {
  fill: #f3f6fe;
  stroke: #e7e7e9; }

/* Styling for the major time axis labels */
.oj-gantt-major-axis-label {
  fill: #000;
  font-size: 1rem;
  font-weight: 500; }

/* Styling for the major time axis separators */
.oj-gantt-major-axis-separator {
  stroke: #e7e7e9; }

/* Styling for the minor time axis */
.oj-gantt-minor-axis {
  fill: #f3f6fe;
  stroke: #e7e7e9; }

/* Styling for the minor time axis labels */
.oj-gantt-minor-axis-label {
  fill: #000;
  font-size: 0.875rem;
  font-weight: normal; }

/* Styling for the minor time axis separators */
.oj-gantt-minor-axis-separator {
  stroke: #e7e7e9; }

/* Styling for reference object */
.oj-gantt-reference-object {
  stroke: #ff591f; }

/* Styling for the tooltip label */
.oj-gantt-tooltip-label {
  font-size: 0.875rem;
  color: #3a3a3a;
  padding: 0 2px;
  white-space: nowrap; }
  html:not([dir="rtl"]) .oj-gantt-tooltip-label {
    text-align: right; }
  html[dir="rtl"] .oj-gantt-tooltip-label {
    text-align: left; }

/* Styling for the tooltip value */
.oj-gantt-tooltip-value {
  color: #000;
  padding: 0 2px; }
  html:not([dir="rtl"]) .oj-gantt-tooltip-value {
    text-align: left; }
  html[dir="rtl"] .oj-gantt-tooltip-value {
    text-align: right; }

/* Styling for the default tabular tooltip */
.oj-gantt-tooltip-content {
  display: block;
  border-collapse: separate;
  border-spacing: 2px;
  overflow: hidden; }

/* Styling for the zoom in icon */
.oj-gantt-zoomin-icon {
  background-image: url("../common/images/dvt/common/func_plus_16_ena.png");
  background-color: #ffffff;
  border-color: #d6d7d8; }

/* Styling for the zoom in icon on hover */
.oj-gantt-zoomin-icon.oj-hover {
  background-image: url("../common/images/dvt/common/func_plus_16_hov.png"); }

/* Styling for the zoom in icon on active */
.oj-gantt-zoomin-icon.oj-active {
  background-image: url("../common/images/dvt/common/func_plus_16_act.png"); }

/* Styling for the zoom in icon when disabled */
.oj-gantt-zoomin-icon.oj-disabled {
  background-image: url("../common/images/dvt/common/func_plus_16_dis.png"); }

.oj-gantt-zoomout-icon {
  background-image: url("../common/images/dvt/common/func_minus_16_ena.png");
  background-color: #ffffff;
  border-color: #d6d7d8; }

.oj-gantt-zoomout-icon.oj-hover {
  background-image: url("../common/images/dvt/common/func_minus_16_hov.png"); }

.oj-gantt-zoomout-icon.oj-active {
  background-image: url("../common/images/dvt/common/func_minus_16_act.png"); }

.oj-gantt-zoomout-icon.oj-disabled {
  background-image: url("../common/images/dvt/common/func_minus_16_dis.png"); }

/* Styling for all dependency lines */
.oj-gantt-dependency-line {
  fill: none;
  stroke: #4f4f4f;
  stroke-width: 1; }

/* Styling for all dependency lines when focus */
.oj-gantt-dependency-line.oj-focus {
  stroke-width: 3; }

/* Styling for all dependency line connectors */
.oj-gantt-dependency-line-connector {
  fill: #4f4f4f;
  stroke: #4f4f4f; }

.oj-gantt-zoomin-icon {
  background-image: url("images/dvt/common/zoom_in_16_ena.svg"); }

.oj-gantt-zoomin-icon.oj-hover {
  background-image: url("images/dvt/common/zoom_in_16_hov.svg"); }

.oj-gantt-zoomin-icon.oj-active {
  background-image: url("images/dvt/common/zoom_in_16_act.svg");
  background-color: #045192;
  border-color: #045192; }

.oj-gantt-zoomin-icon.oj-disabled {
  background-image: url("images/dvt/common/zoom_in_16_dis.svg"); }

.oj-gantt-zoomout-icon {
  background-image: url("images/dvt/common/zoom_out_16_ena.svg"); }

.oj-gantt-zoomout-icon.oj-hover {
  background-image: url("images/dvt/common/zoom_out_16_hov.svg"); }

.oj-gantt-zoomout-icon.oj-active {
  background-image: url("images/dvt/common/zoom_out_16_act.svg");
  background-color: #045192;
  border-color: #045192; }

.oj-gantt-zoomout-icon.oj-disabled {
  background-image: url("images/dvt/common/zoom_out_16_dis.svg"); }

oj-dial-gauge:not(.oj-complete) {
  visibility: hidden; }

.oj-dialgauge {
  width: 200px;
  height: 200px; }

oj-led-gauge:not(.oj-complete) {
  visibility: hidden; }

.oj-ledgauge {
  width: 40px;
  height: 40px; }

oj-status-meter-gauge:not(.oj-complete) {
  visibility: hidden; }

.oj-statusmetergauge {
  width: 220px;
  height: 25px; }

oj-rating-gauge:not(.oj-complete) {
  visibility: hidden; }

.oj-ratinggauge {
  width: 120px;
  height: 25px; }

.oj-gauge-metric-label {
  font-weight: bold; }

.oj-gauge-threshold1 {
  color: #ed6647; }

.oj-gauge-threshold2 {
  color: #fad55c; }

.oj-gauge-threshold3 {
  color: #68c182; }

.oj-dialgauge.oj-focus-highlight,
.oj-ledgauge.oj-focus-highlight,
.oj-statusmetergauge.oj-focus-highlight,
.oj-ratinggauge.oj-focus-highlight {
  outline: dotted 1px #000;
  outline: -webkit-focus-ring-color auto; }

oj-n-box:not(.oj-complete) {
  visibility: hidden; }

.oj-nbox {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 100%;
  height: 540px; }

.oj-nbox-columns-title,
.oj-nbox-rows-title {
  color: #000;
  font-size: 1rem; }

.oj-nbox-column-label,
.oj-nbox-row-label {
  color: #000;
  font-size: 0.875rem; }

.oj-nbox-cell {
  background-color: #e9e9e9; }

.oj-nbox-cell.oj-maximized {
  background-color: #dddddd; }

.oj-nbox-cell.oj-minimized {
  background-color: #e9e9e9; }

.oj-nbox-cell-label {
  color: #000;
  font-size: 1rem;
  font-weight: normal; }

.oj-nbox-cell-countlabel {
  color: #000; }

.oj-nbox-cell-countlabel.oj-nbox-cell-header {
  font-size: 1rem; }

.oj-nbox-node {
  background-color: #ffffff; }

.oj-nbox-node.oj-hover {
  border-color: #ffffff; }

.oj-nbox-node.oj-selected {
  border-color: #000000; }

.oj-nbox-node-label {
  font-size: 1rem; }

.oj-nbox-node-secondarylabel {
  font-size: 0.875rem; }

.oj-nbox-dialog {
  background-color: #e9e9e9;
  border-color: #bcc7d2; }

.oj-nbox-dialog-label {
  color: #000;
  font-size: 1rem;
  font-weight: normal; }

.oj-nbox-dialog-countlabel {
  font-size: 1rem;
  font-weight: normal; }

oj-picto-chart:not(.oj-complete) {
  visibility: hidden; }

.oj-pictochart {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  display: inline-block; }

.oj-pictochart-item {
  background-color: #a6acb1; }

oj-tag-cloud:not(.oj-complete) {
  visibility: hidden; }

.oj-tagcloud {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 100%;
  height: 300px;
  color: #000; }

oj-thematic-map:not(.oj-complete) {
  visibility: hidden; }

.oj-thematicmap {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 600px;
  height: 375px; }

.oj-thematicmap-arealayer {
  background-color: #dddddd;
  border-color: #ffffff;
  font-size: 1rem; }

.oj-thematicmap-area {
  border-color: #ffffff; }

.oj-thematicmap-area.oj-hover {
  border-color: #ffffff; }

.oj-thematicmap-area.oj-selected {
  border-top-color: #ffffff;
  border-bottom-color: #000000; }

.oj-thematicmap-marker {
  border-color: #ffffff;
  background-color: #333333;
  color: #000;
  font-size: 1rem; }

.oj-thematicmap-link {
  color: #9bb2c7; }

.oj-thematicmap-link.oj-hover {
  color: #ffffff; }

.oj-thematicmap-link.oj-selected {
  border-color: #000000; }

oj-treemap:not(.oj-complete) {
  visibility: hidden; }

.oj-treemap {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 650px;
  height: 400px;
  font-size: 0.875rem;
  color: #000; }

html:not([dir="rtl"]) .oj-treemap-isolate-icon {
  background-image: url("../common/images/dvt/treemap/s_max_ena.png"); }

html[dir="rtl"] .oj-treemap-isolate-icon {
  background-image: url("../common/images/dvt/treemap/s_max_ena_rtl.png"); }

html:not([dir="rtl"]) .oj-treemap-restore-icon {
  background-image: url("../common/images/dvt/treemap/s_restore_ena.png"); }

html[dir="rtl"] .oj-treemap-restore-icon {
  background-image: url("../common/images/dvt/treemap/s_restore_ena_rtl.png"); }

html:not([dir="rtl"]) .oj-treemap-isolate-icon.oj-hover {
  background-image: url("../common/images/dvt/treemap/s_max_ovr.png"); }

html[dir="rtl"] .oj-treemap-isolate-icon.oj-hover {
  background-image: url("../common/images/dvt/treemap/s_max_ovr_rtl.png"); }

html:not([dir="rtl"]) .oj-treemap-restore-icon.oj-hover {
  background-image: url("../common/images/dvt/treemap/s_restore_ovr.png"); }

html[dir="rtl"] .oj-treemap-restore-icon.oj-hover {
  background-image: url("../common/images/dvt/treemap/s_restore_ovr_rtl.png"); }

html:not([dir="rtl"]) .oj-treemap-isolate-icon.oj-active {
  background-image: url("../common/images/dvt/treemap/s_max_dwn.png"); }

html[dir="rtl"] .oj-treemap-isolate-icon.oj-active {
  background-image: url("../common/images/dvt/treemap/s_max_dwn_rtl.png"); }

html:not([dir="rtl"]) .oj-treemap-restore-icon.oj-active {
  background-image: url("../common/images/dvt/treemap/s_restore_dwn.png"); }

html[dir="rtl"] .oj-treemap-restore-icon.oj-active {
  background-image: url("../common/images/dvt/treemap/s_restore_dwn_rtl.png"); }

.oj-treemap-attribute-type-text {
  color: #3a3a3a;
  font-size: 1rem; }

.oj-treemap-attribute-value-text {
  font-size: 1rem; }

.oj-treemap-current-text {
  color: #000;
  font-size: 1rem; }

.oj-treemap-node {
  font-size: 0.875rem; }

.oj-treemap-node.oj-hover {
  border-color: #ebeced; }

.oj-treemap-node.oj-selected {
  border-top-color: #000000;
  border-bottom-color: #ffffff; }

.oj-treemap-node-header {
  font-size: 0.875rem;
  color: #3a3a3a;
  background-color: #ffffff;
  border-color: #d5dfe5; }

.oj-treemap-node-header.oj-hover {
  background-color: #ebeced;
  border-color: #d5dfe5;
  border-top-color: #ebeced;
  border-bottom-color: #d4d4d6; }

.oj-treemap-node-header.oj-selected {
  background-color: #dae9f5;
  border-color: #d5dfe5;
  border-top-color: #000000;
  border-bottom-color: #ffffff; }

oj-sunburst:not(.oj-complete) {
  visibility: hidden; }

.oj-sunburst {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 400px;
  height: 400px;
  font-size: 0.875rem;
  color: #000; }

.oj-sunburst-expand-icon {
  background-image: url("../common/images/dvt/sunburst/node_expand.png"); }

.oj-sunburst-collapse-icon {
  background-image: url("../common/images/dvt/sunburst/node_collapse.png"); }

.oj-sunburst-expand-icon.oj-hover {
  background-image: url("../common/images/dvt/sunburst/node_expand_ovr.png"); }

.oj-sunburst-collapse-icon.oj-hover {
  background-image: url("../common/images/dvt/sunburst/node_collapse_ovr.png"); }

.oj-sunburst-expand-icon.oj-active {
  background-image: url("../common/images/dvt/sunburst/node_expand_ovr.png"); }

.oj-sunburst-collapse-icon.oj-active {
  background-image: url("../common/images/dvt/sunburst/node_collapse_ovr.png"); }

.oj-sunburst-attribute-type-text {
  color: #3a3a3a;
  font-size: 1rem; }

.oj-sunburst-attribute-value-text {
  font-size: 1rem; }

.oj-sunburst-current-text {
  color: #000;
  font-size: 1rem; }

.oj-sunburst-node {
  font-size: 0.875rem; }

.oj-sunburst-node.oj-hover {
  border-color: #ebeced; }

.oj-sunburst-node.oj-selected {
  border-top-color: #000000;
  border-bottom-color: #ffffff; }

oj-time-axis:not(.oj-complete) {
  visibility: hidden; }

/* Styling for the timeaxis widget */
.oj-timeaxis {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;
  background-color: transparent;
  border: 1px solid #d5dfe5; }

/* Styling for the timeaxis labels */
.oj-timeaxis-label {
  fill: #000;
  font-size: 1rem; }

/* Styling for the timeaxis separators */
.oj-timeaxis-separator {
  stroke: #d5dfe5; }

.oj-table-header-row .oj-timeaxis-separator {
  stroke: #c8cfd5; }

.oj-datagrid-column-header-cell .oj-timeaxis-separator {
  stroke: #e7e7e9; }

/* Styling border for stamping onto ojTable header case:
    All timeaxes does not have bottom border */
.oj-table-header-row .oj-timeaxis {
  border-bottom: none;
  border-color: #c8cfd5; }

/* Styling border for stamping onto ojDataGrid header case:
    First timeaxis does not have border, all other timeaxes have top border */
.oj-datagrid-column-header-cell .oj-timeaxis {
  border: none; }

.oj-datagrid-column-header-cell .oj-timeaxis ~ .oj-timeaxis {
  border-top: 1px solid #e7e7e9; }

oj-timeline:not(.oj-complete) {
  visibility: hidden; }

.oj-timeline {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;
  border-color: #d5dfe5; }

.oj-timeline-item {
  background-color: #ffffff;
  border-color: #648baf; }

.oj-timeline-item.oj-hover {
  border-color: #85bbe7; }

.oj-timeline-item.oj-selected {
  border-color: #000000; }

.oj-timeline-item-description {
  color: #000;
  white-space: nowrap;
  font-size: 0.875rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }

.oj-timeline-item-title {
  color: #3a3a3a;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: bold;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }

.oj-timeline-major-axis-label {
  color: #3a3a3a;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: bold;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }

.oj-timeline-major-axis-separator {
  color: #bcc7d2; }

.oj-timeline-minor-axis {
  background-color: #f6f6f7;
  border-color: #d5dfe5; }

.oj-timeline-minor-axis-label {
  color: #000;
  white-space: nowrap;
  font-size: 0.875rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }

.oj-timeline-minor-axis-separator {
  color: #bcc7d2; }

.oj-timeline-overview {
  background-color: #e6ecf3; }

.oj-timeline-overview-label {
  color: #3a3a3a;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: bold;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }

.oj-timeline-overview-window {
  background-color: #ffffff;
  border-color: #4f4f4f; }

.oj-timeline-overview-window-handle-horizontal {
  background-image: url("../common/images/dvt/common/drag_horizontal.png"); }

.oj-timeline-overview-window-handle-vertical {
  background-image: url("../common/images/dvt/common/drag_vertical.png"); }

.oj-timeline-reference-object {
  color: #ff591f; }

.oj-timeline-series {
  background-color: #f6f6f7; }

.oj-timeline-series-label {
  color: #3a3a3a;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: bold;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }

.oj-timeline-series-empty-text {
  color: #000;
  white-space: nowrap;
  font-size: 0.875rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }

.oj-timeline-zoomin-icon {
  background-image: url("../common/images/dvt/common/func_plus_16_ena.png");
  background-color: #ffffff;
  border-color: #d6d7d8; }

.oj-timeline-zoomin-icon.oj-hover {
  background-image: url("../common/images/dvt/common/func_plus_16_hov.png"); }

.oj-timeline-zoomin-icon.oj-active {
  background-image: url("../common/images/dvt/common/func_plus_16_act.png"); }

.oj-timeline-zoomin-icon.oj-disabled {
  background-image: url("../common/images/dvt/common/func_plus_16_dis.png"); }

.oj-timeline-zoomout-icon {
  background-image: url("../common/images/dvt/common/func_minus_16_ena.png");
  background-color: #ffffff;
  border-color: #d6d7d8; }

.oj-timeline-zoomout-icon.oj-hover {
  background-image: url("../common/images/dvt/common/func_minus_16_hov.png"); }

.oj-timeline-zoomout-icon.oj-active {
  background-image: url("../common/images/dvt/common/func_minus_16_act.png"); }

.oj-timeline-zoomout-icon.oj-disabled {
  background-image: url("../common/images/dvt/common/func_minus_16_dis.png"); }

.oj-timeline-zoomin-icon {
  background-image: url("images/dvt/common/zoom_in_16_ena.svg"); }

.oj-timeline-zoomin-icon.oj-hover {
  background-image: url("images/dvt/common/zoom_in_16_hov.svg"); }

.oj-timeline-zoomin-icon.oj-active {
  background-image: url("images/dvt/common/zoom_in_16_act.svg");
  background-color: #045192;
  border-color: #045192; }

.oj-timeline-zoomin-icon.oj-disabled {
  background-image: url("images/dvt/common/zoom_in_16_dis.svg"); }

.oj-timeline-zoomout-icon {
  background-image: url("images/dvt/common/zoom_out_16_ena.svg"); }

.oj-timeline-zoomout-icon.oj-hover {
  background-image: url("images/dvt/common/zoom_out_16_hov.svg"); }

.oj-timeline-zoomout-icon.oj-active {
  background-image: url("images/dvt/common/zoom_out_16_act.svg");
  background-color: #045192;
  border-color: #045192; }

.oj-timeline-zoomout-icon.oj-disabled {
  background-image: url("images/dvt/common/zoom_out_16_dis.svg"); }

/* messaging */
/* --------------------------------------------------------------- */
/* styles the root of the popup component that wraps all messaging content */
/* wraps all messaging content that displays inside popup. */
.oj-messaging-popup-container {
  max-width: 320px; }

/* separator inside popup container */
.oj-messaging-popup-container hr {
  margin-top: 20px;
  margin-bottom: 10px; }

/* wraps all messaging content that displays inline */
.oj-messaging-inline-container .oj-message {
  padding: 10px;
  border-style: solid;
  border-width: 0 1px 1px 1px;
  margin-top: 5px;
  border-top-width: 1px;
  border-radius: 5px; }

.oj-radioset .oj-messaging-inline-container .oj-message:first-child,
.oj-checkboxset .oj-messaging-inline-container .oj-message:first-child,
.oj-switch .oj-messaging-inline-container .oj-message:first-child,
.oj-slider .oj-messaging-inline-container .oj-message:first-child {
  border-top-width: 1px; }

.oj-switch .oj-messaging-inline-container .oj-message:first-child,
.oj-slider .oj-messaging-inline-container .oj-message:first-child {
  margin-top: 5px; }

.oj-slider-vertical .oj-messaging-inline-container .oj-message:first-child {
  margin-top: 18px; }

.oj-messaging-inline-container .oj-message.oj-message-error {
  background-color: #FFF3F3;
  border-color: #ffdfdf; }

.oj-messaging-inline-container .oj-message.oj-message-warning {
  background-color: #fff2de;
  border-color: #ffeaca; }

.oj-messaging-inline-container .oj-message.oj-message-info {
  background-color: #EAF5FB;
  border-color: #d9edf8; }

.oj-messaging-inline-container .oj-message.oj-message-confirmation {
  background-color: #E5F6EA;
  border-color: #d6f1de; }

/** 
     * wraps a message block that includes the icon and content inline-blocks
     * 1. prevent wrapping the content inline-block.  
     */
.oj-message {
  display: block;
  text-align: left;
  white-space: nowrap;
  /* 1 */ }
  html[dir="rtl"] .oj-message {
    text-align: right; }

/* from second to last message blocks inside popup container */
.oj-messaging-popup-container .oj-message:nth-of-type(n+2) {
  padding-top: 20px; }

.oj-message-content {
  display: inline-block;
  width: 95%;
  word-wrap: break-word; }

/* 
     * wraps the message summary and detail parts 
     * 1. IE requires width to be set in addition to max-width. 324 is 95% of 340px
     */
.oj-messaging-popup-container .oj-message-content {
  max-width: 324px;
  width: 95%;
  /* 1 */ }

/**
     * message summary text 
     * 1. allow summary text to wrap normally.
     */
.oj-message-summary {
  color: #000;
  font-size: 1rem;
  font-weight: normal;
  vertical-align: top;
  white-space: normal;
  /* 1 */ }
  html:not([dir="rtl"]) .oj-message-summary {
    padding: 0 0 0 10px; }
  html[dir="rtl"] .oj-message-summary {
    padding: 0 10px 0 0; }

/** 
     * message detail text 
     * 1. allow detail text to wrap normally.
     */
.oj-message-detail {
  color: #000;
  white-space: normal;
  /* 1 */ }
  html:not([dir="rtl"]) .oj-message-detail {
    padding: 7px 0 0 10px; }
  html[dir="rtl"] .oj-message-detail {
    padding: 7px 10px 0 0; }

/**
     * wraps all hints
     */
/**
     * for hint types - validator, converter
     */
/**
     * for hint title 
     * 1. if title isn't the first hint add padding to the top. 
     */
.oj-form-control-hint-title:not(:first-child) {
  padding-top: 20px;
  /* 1 */ }

.oj-message-status-icon {
  display: inline-block;
  vertical-align: top; }

.oj-messaging-inline-container .oj-message {
  margin-top: 5px;
  border-radius: 5px;
  border-width: 1px 1px 1px 1px; }

/* wraps help text that displays inside popup. */
.oj-help-popup-container {
  max-width: 320px; }

.oj-help-popup {
  min-height: 30px; }

oj-label:not(.oj-complete) {
  visibility: hidden; }

.oj-label,
.oj-label-nocomp {
  display: block;
  color: #3a3a3a;
  font-size: 0.875rem;
  font-weight: normal;
  margin-bottom: 0.25em; }

/* 
      We need to line up a label with plain text but without giving it top margins which 
      we get with oj-label-inline.
     */
.oj-label-nocomp.oj-label-inline.oj-label-for-non-control {
  margin-top: 0;
  vertical-align: baseline; }

/* When label is block, this wrapper is needed in order 
       to float modifiers (required, help, changed) to the end of the label */
.oj-label-group {
  display: inline-block;
  vertical-align: bottom; }

.oj-label-help-icon {
  vertical-align: middle; }

.oj-label-required-icon {
  vertical-align: top; }

.oj-label label {
  float: left; }
  html[dir="rtl"] .oj-label label {
    float: right; }

.oj-label-required-icon,
.oj-label-help-icon {
  float: right; }
  html[dir="rtl"] .oj-label-required-icon, html[dir="rtl"]
  .oj-label-help-icon {
    float: left; }
  html:not([dir="rtl"]) .oj-label-required-icon, html:not([dir="rtl"])
  .oj-label-help-icon {
    margin-left: 6px;
    margin-right: 0; }
  html[dir="rtl"] .oj-label-required-icon, html[dir="rtl"]
  .oj-label-help-icon {
    margin-right: 6px;
    margin-left: 0; }

.oj-label-help-icon-anchor {
  text-decoration: none;
  float: right; }
  html[dir="rtl"] .oj-label-help-icon-anchor {
    float: left; }
  html:not([dir="rtl"]) .oj-label-help-icon-anchor {
    padding-right: 2px; }
  html[dir="rtl"] .oj-label-help-icon-anchor {
    padding-left: 2px; }

.oj-label.oj-label-nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }
  html:not([dir="rtl"]) .oj-label.oj-label-nowrap {
    padding-right: 0.625rem; }
  html[dir="rtl"] .oj-label.oj-label-nowrap {
    padding-left: 0.625rem; }

.oj-label.oj-label-nowrap .oj-label-group {
  overflow: inherit;
  text-overflow: inherit; }

.oj-label-inline {
  display: inline-block;
  vertical-align: top;
  margin-top: 0.55em;
  box-sizing: border-box; }
  html:not([dir="rtl"]) .oj-label-inline {
    padding-right: 0.625rem; }
  html[dir="rtl"] .oj-label-inline {
    padding-left: 0.625rem; }

.oj-form-non-control-inline {
  display: inline-block;
  vertical-align: top;
  margin-top: 0.55em;
  box-sizing: border-box; }

.oj-label-inline label {
  float: right; }
  html[dir="rtl"] .oj-label-inline label {
    float: left; }

.oj-label-inline .oj-label-required-icon,
.oj-label-inline .oj-label-help-icon {
  float: left; }
  html[dir="rtl"] .oj-label-inline .oj-label-required-icon, html[dir="rtl"]
  .oj-label-inline .oj-label-help-icon {
    float: right; }
  html:not([dir="rtl"]) .oj-label-inline .oj-label-required-icon, html:not([dir="rtl"])
  .oj-label-inline .oj-label-help-icon {
    margin-right: 6px;
    margin-left: 0; }
  html[dir="rtl"] .oj-label-inline .oj-label-required-icon, html[dir="rtl"]
  .oj-label-inline .oj-label-help-icon {
    margin-left: 6px;
    margin-right: 0; }

.oj-label-inline .oj-label-help-icon-anchor {
  float: left; }
  html[dir="rtl"] .oj-label-inline .oj-label-help-icon-anchor {
    float: right; }

.oj-label-inline.oj-label-inline-top {
  margin-top: 0; }

.oj-flex-bar > .oj-flex-bar-middle > .oj-form-control,
.oj-flex-bar > .oj-flex-bar-middle > .oj-form-non-control {
  margin-bottom: 10px; }

.oj-label-accesskey {
  text-decoration: underline; }

.oj-label-required-icon {
  background-color: #ff0000;
  border-radius: 50%;
  height: 4px;
  width: 4px; }

/* form-control classes */
/* --------------------------------------------------------------- */
html .oj-form-control {
  margin-bottom: 4px;
  vertical-align: middle; }

/** for all hints */
.oj-form-control-hint {
  color: #000;
  padding: 0;
  word-wrap: break-word; }

.oj-form-control-title {
  color: #000; }

.oj-form-control-inherit .oj-form-control {
  height: 100%;
  min-height: 100%;
  margin-bottom: 0;
  max-width: 100%;
  min-width: 100%; }

oj-input-text:not(.oj-complete) {
  visibility: hidden; }

oj-input-password:not(.oj-complete) {
  visibility: hidden; }

oj-text-area:not(.oj-complete) {
  visibility: hidden; }

.oj-inputtext,
.oj-inputpassword,
.oj-textarea,
.oj-inputtext-nocomp,
.oj-inputpassword-nocomp,
.oj-textarea-nocomp {
  box-sizing: border-box;
  display: inline-block;
  font-size: 1.0625rem;
  /* use a width of 100% and then max and min width so that when 
         there's less room for the form control it can automatically 
         get smaller instead of overflowing its boundaries */
  max-width: 100%;
  min-width: 8em;
  width: 100%; }

.oj-inputtext-input,
.oj-inputpassword-input,
.oj-textarea-input,
.oj-inputtext-nocomp,
.oj-inputpassword-nocomp,
.oj-textarea-nocomp {
  text-align: left;
  color: #000;
  background-color: transparent;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  outline: 0;
  box-sizing: border-box;
  font-family: inherit;
  font-weight: normal;
  width: 100%; }
  html[dir="rtl"] .oj-inputtext-input, html[dir="rtl"]
  .oj-inputpassword-input, html[dir="rtl"]
  .oj-textarea-input, html[dir="rtl"]
  .oj-inputtext-nocomp, html[dir="rtl"]
  .oj-inputpassword-nocomp, html[dir="rtl"]
  .oj-textarea-nocomp {
    text-align: right; }
  .oj-inputtext-input::-webkit-input-placeholder,
  .oj-inputpassword-input::-webkit-input-placeholder,
  .oj-textarea-input::-webkit-input-placeholder,
  .oj-inputtext-nocomp::-webkit-input-placeholder,
  .oj-inputpassword-nocomp::-webkit-input-placeholder,
  .oj-textarea-nocomp::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputtext-input::-moz-placeholder,
  .oj-inputpassword-input::-moz-placeholder,
  .oj-textarea-input::-moz-placeholder,
  .oj-inputtext-nocomp::-moz-placeholder,
  .oj-inputpassword-nocomp::-moz-placeholder,
  .oj-textarea-nocomp::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputtext-input:-ms-input-placeholder,
  .oj-inputpassword-input:-ms-input-placeholder,
  .oj-textarea-input:-ms-input-placeholder,
  .oj-inputtext-nocomp:-ms-input-placeholder,
  .oj-inputpassword-nocomp:-ms-input-placeholder,
  .oj-textarea-nocomp:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }

.oj-inputtext-input[size],
.oj-inputpassword-input[size],
.oj-textarea-input[size] {
  width: auto; }

.oj-inputtext-input,
.oj-inputpassword-input,
.oj-inputtext-nocomp,
.oj-inputpassword-nocomp {
  height: 1.938rem;
  padding: 0 0;
  box-sizing: border-box; }

.oj-textarea-input,
.oj-textarea-nocomp {
  height: auto;
  padding: 0.5em 0;
  resize: none;
  line-height: 1.4375rem; }

.oj-inputtext.oj-invalid .oj-inputtext-input,
.oj-inputpassword.oj-invalid .oj-inputpassword-input,
.oj-textarea.oj-invalid .oj-textarea-input {
  border-width: 0 0 2px 0;
  border-radius: 0;
  border-style: solid;
  border-color: #dd6666; }

.oj-inputtext.oj-warning .oj-inputtext-input,
.oj-inputpassword.oj-warning .oj-inputpassword-input,
.oj-textarea.oj-warning .oj-textarea-input {
  border-width: 0 0 2px 0;
  border-radius: 0;
  border-style: solid;
  border-color: #ffd699; }

.oj-inputtext.oj-disabled .oj-inputtext-input,
.oj-inputpassword.oj-disabled .oj-inputpassword-input,
.oj-textarea.oj-disabled .oj-textarea-input,
.oj-inputtext-nocomp[disabled],
.oj-inputpassword-nocomp[disabled],
.oj-textarea-nocomp[disabled] {
  color: #000;
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5; }

.oj-inputtext.oj-read-only .oj-inputtext-input,
.oj-inputpassword.oj-read-only .oj-inputpassword-input,
.oj-textarea.oj-read-only .oj-textarea-input,
.oj-inputtext-nocomp[readonly],
.oj-inputpassword-nocomp[readonly],
.oj-textarea-nocomp[readonly] {
  color: #000;
  background-color: transparent;
  border-color: transparent;
  border-left-width: 0;
  border-right-width: 0;
  font-size: 1.0625rem;
  font-weight: bold;
  padding: 0; }

.oj-textarea.oj-read-only .oj-textarea-input,
.oj-textarea-nocomp[readonly] {
  padding-top: 6px; }

.oj-form-control-inherit .oj-inputtext-input,
.oj-form-control-inherit .oj-inputtext-nocomp,
.oj-form-control-inherit .oj-inputpassword-input,
.oj-form-control-inherit .oj-inputpassword-nocomp,
.oj-form-control-inherit .oj-textarea-input,
.oj-form-control-inherit .oj-textarea-nocomp {
  text-align: inherit;
  color: inherit;
  height: 100%;
  width: 100%;
  background-color: inherit;
  border-width: 0; }

/* inputnumber */
/* --------------------------------------------------------------- */
oj-input-number:not(.oj-complete) {
  visibility: hidden; }

/* We need to support this sizing use cases: 
       - width on root dom element should be the width of input and buttons, not just input. */
/* Root dom element for inputnumber. 
     It wraps the input and the down/up buttons */
.oj-inputnumber {
  display: inline-block;
  /* use a width of 100% and then max and min width so that when 
         there's less room for the form control it can automatically 
         get smaller instead of overflowing its boundaries */
  max-width: 100%;
  min-width: 8em;
  width: 100%;
  font-size: 1.0625rem; }

.oj-inputnumber-wrapper {
  width: 100%;
  white-space: nowrap;
  display: -webkit-inline-flex;
  display: inline-flex;
  box-sizing: border-box;
  height: 1.938rem;
  border-radius: 5px; }

/* Input field for inputnumber */
.oj-inputnumber-input {
  text-align: right;
  color: #000;
  background-color: transparent;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  -webkit-flex: 1;
  flex: 1;
  min-width: 1em;
  outline: 0;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 100%; }
  html[dir="rtl"] .oj-inputnumber-input {
    text-align: left; }
  .oj-inputnumber-input::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputnumber-input::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputnumber-input:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }

html:not([dir="rtl"]) .oj-inputnumber-input {
  margin-right: 10px; }

html[dir="rtl"] .oj-inputnumber-input {
  margin-left: 10px; }

/* Invalid/warning styling */
/* ----------------------- */
.oj-inputnumber.oj-invalid .oj-inputnumber-input {
  border-width: 0 0 2px 0;
  border-radius: 0;
  border-color: #dd6666;
  border-style: solid; }

.oj-inputnumber.oj-warning .oj-inputnumber-input {
  border-width: 0 0 2px 0;
  border-radius: 0;
  border-color: #ffd699;
  border-style: solid; }

/* Disabled styling for the widget */
.oj-inputnumber.oj-disabled .oj-inputnumber-input {
  color: #000;
  background-color: transparent; }

.oj-inputnumber.oj-disabled .oj-inputnumber-input {
  color: #000;
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5; }

/* readonly styling for the widget */
.oj-inputnumber.oj-read-only .oj-inputnumber-input {
  border-color: transparent; }

.oj-inputnumber.oj-read-only .oj-inputnumber-input {
  color: #000;
  background-color: transparent;
  border-color: transparent;
  border-left-width: 0;
  border-right-width: 0;
  font-size: 1.0625rem;
  font-weight: bold;
  padding: 0; }

/* Styling for focus state */
/* styling for inputNumber's buttonset/buttons */
.oj-inputnumber .oj-buttonset {
  height: 100%;
  box-sizing: border-box; }

.oj-inputnumber .oj-inputnumber-button.oj-button {
  height: 100%;
  line-height: normal;
  margin-bottom: 0; }

.oj-inputnumber.oj-read-only .oj-buttonset {
  display: none; }

.oj-inputnumber-button.oj-button.oj-focus {
  outline-style: none; }

.oj-form-control-inherit .oj-inputnumber-input {
  text-align: inherit;
  color: inherit;
  height: 100%;
  width: 100%;
  background-color: inherit;
  border-width: 0; }

.oj-form-control-inherit .oj-inputnumber-wrapper {
  height: 100%; }

.oj-inputnumber .oj-button {
  width: 50px; }

/* listbox */
/* --------------------------------------------------------------- */
/*
     * applied to the dropdown
     */
/* defines the stacking context for the listbox */
.oj-listbox-drop-layer {
  z-index: 1000; }

.oj-listbox-drop {
  box-sizing: border-box;
  top: 100%;
  background: #ffffff;
  border: 1px solid #e7e7e9;
  border-top: 0;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); }

/*
     * applied to the dropdown when it is open above the component
     */
.oj-listbox-drop-above {
  border-top: 1px solid #e7e7e9;
  border-bottom: 0; }

/*
     * applied to placeholder in the dropdown
     */
.oj-listbox-placeholder {
  color: #646464; }

/* 
     * applied to results
     */
.oj-listbox-results {
  max-height: 200px;
  padding: 0;
  margin: 1px 0 2px 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-tap-highlight-color: transparent; }

/* 
     * applied to nested option groups
     */
.oj-listbox-result-sub {
  margin: 0;
  padding: 0; }

/* 
     * applied to result labels
     */
.oj-listbox-result-label {
  line-height: 2rem;
  margin: 0;
  cursor: pointer;
  min-height: 2rem;
  word-wrap: break-word;
  -webkit-touch-callout: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }
  html:not([dir="rtl"]) .oj-listbox-result-label {
    padding-left: 5px; }
  html[dir="rtl"] .oj-listbox-result-label {
    padding-right: 5px; }

/* 
     * applied to result labels in different nested levels of option groups.
     * Padding is used instead of margins because the background color for states
     * like hover need to span across the entire box.
     */
html:not([dir="rtl"]) .oj-listbox-results-depth-1 > .oj-listbox-result-label {
  padding-left: 20px; }

html[dir="rtl"] .oj-listbox-results-depth-1 > .oj-listbox-result-label {
  padding-right: 20px; }

html:not([dir="rtl"]) .oj-listbox-results-depth-2 > .oj-listbox-result-label {
  padding-left: 35px; }

html[dir="rtl"] .oj-listbox-results-depth-2 > .oj-listbox-result-label {
  padding-right: 35px; }

html:not([dir="rtl"]) .oj-listbox-results-depth-3 > .oj-listbox-result-label {
  padding-left: 50px; }

html[dir="rtl"] .oj-listbox-results-depth-3 > .oj-listbox-result-label {
  padding-right: 50px; }

html:not([dir="rtl"]) .oj-listbox-results-depth-4 > .oj-listbox-result-label {
  padding-left: 65px; }

html[dir="rtl"] .oj-listbox-results-depth-4 > .oj-listbox-result-label {
  padding-right: 65px; }

html:not([dir="rtl"]) .oj-listbox-results-depth-5 > .oj-listbox-result-label {
  padding-left: 80px; }

html[dir="rtl"] .oj-listbox-results-depth-5 > .oj-listbox-result-label {
  padding-right: 80px; }

html:not([dir="rtl"]) .oj-listbox-results-depth-6 > .oj-listbox-result-label {
  padding-left: 95px; }

html[dir="rtl"] .oj-listbox-results-depth-6 > .oj-listbox-result-label {
  padding-right: 95px; }

html:not([dir="rtl"]) .oj-listbox-results-depth-7 > .oj-listbox-result-label {
  padding-left: 110px; }

html[dir="rtl"] .oj-listbox-results-depth-7 > .oj-listbox-result-label {
  padding-right: 110px; }

/* 
     * applied to the nested option group labels, 
     * they are direct children of li.oj-listbox-result-with-children
     */
.oj-listbox-result-with-children > .oj-listbox-result-label {
  font-weight: bold; }

/* 
     * applied to choices in the dropdown
     */
.oj-listbox-results li {
  list-style: none;
  display: list-item;
  background-image: none; }

/* 
     * applied to the hovered choices in the dropdown
     */
.oj-listbox-results .oj-hover {
  background: #ebeced; }

/*
     * applied to disabled choices in the dropdown
     */
.oj-listbox-results .oj-disabled {
  color: #9e9e9e;
  display: list-item;
  cursor: default; }

/*
     * applied to selected choice in the dropdown
     */
.oj-listbox-results .oj-selected {
  display: none; }

/*
     * This class is only applied transiently to measure the browser native scollbar
     */
.oj-listbox-measure-scrollbar {
  position: absolute;
  top: -10000px;
  width: 100px;
  height: 100px;
  overflow: scroll; }
  html:not([dir="rtl"]) .oj-listbox-measure-scrollbar {
    left: -10000px; }
  html[dir="rtl"] .oj-listbox-measure-scrollbar {
    right: -10000px; }

/* icons */
/* -----------------------------*/
/* 
     * Applied to the search icon
     */
.oj-listbox-search-icon {
  color: #ffffff; }

/* 
     * Applied to the spyglass (search icon) container
     */
.oj-listbox-spyglass-box {
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
  border: 0;
  overflow: hidden;
  display: inline-block;
  position: absolute; }
  html:not([dir="rtl"]) .oj-listbox-spyglass-box {
    right: 0;
    padding-right: 5px; }
  html[dir="rtl"] .oj-listbox-spyglass-box {
    left: 0;
    padding-left: 5px; }

/* 
     * Applied to the search box which includes the search text and the spyglass icon
     */
.oj-listbox-search {
  box-sizing: border-box;
  width: 100%;
  display: inline-table;
  background-color: #ffffff;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px; }

/* 
     * Applied to the search text
     */
.oj-listbox-input {
  box-sizing: border-box;
  width: 100%;
  color: #000;
  outline: none;
  border: 0;
  border-radius: 5px;
  background-color: inherit;
  box-shadow: none;
  padding-top: 6px;
  padding-bottom: 5px; }
  html:not([dir="rtl"]) .oj-listbox-input {
    padding-right: 2rem;
    padding-left: 0; }
  html[dir="rtl"] .oj-listbox-input {
    padding-left: 2rem;
    padding-right: 0; }

/* 
     * Used to cover the border bottom of the select box when the dropdown is open
     */
.oj-listbox-search-wrapper {
  border: 0;
  padding: 5px;
  background-color: transparent; }

/* 
     * Applied to the "No matches found" result entry
     */
html:not([dir="rtl"]) .oj-listbox-no-results {
  padding-left: 5px; }

html[dir="rtl"] .oj-listbox-no-results {
  padding-right: 5px; }

.oj-hicontrast .oj-listbox-results .oj-hover {
  border: 1px solid #0572ce; }

.oj-hicontrast .oj-listbox-results .oj-disabled {
  border: 1px dotted #0572ce; }

/* 
     * Applied to the search icon
     */
.oj-listbox-search-icon {
  padding: 0.31rem; }

/* 
     * Applied to the spyglass (search icon) container
     */
.oj-listbox-spyglass-box {
  padding-top: 1px; }
  html:not([dir="rtl"]) .oj-listbox-spyglass-box {
    padding-right: 6px; }
  html[dir="rtl"] .oj-listbox-spyglass-box {
    padding-left: 6px; }

/* 
     * Applied to the listbox results if it has custonm header.
     */
.oj-listbox-results-with-header {
  padding: 0;
  margin: 0; }

/* 
     * Applied to the listbox custonm header options.
     */
.oj-listbox-results-with-header li {
  background-image: none;
  list-style: outside none none; }

/* 
     * Applied to the listbox custonm header.
     */
.oj-listbox-result-header {
  padding: 5px 5px 0 5px; }

.oj-listbox-result-header ul {
  padding: 0; }

.oj-listbox-result-header a.oj-focus {
  text-decoration: underline;
  outline: dotted 1px #ffffff;
  outline: -webkit-focus-ring-color auto; }

/* 
     * Applied to the matching text in the dropdown options
     */
.oj-listbox-highlighter {
  font-weight: bold; }

.oj-form-control-inherit .oj-listbox-input {
  text-align: inherit;
  color: inherit;
  height: 100%;
  width: 100%;
  background-color: inherit;
  border-width: 0; }

oj-input-time:not(.oj-complete) {
  visibility: hidden; }

oj-input-date:not(.oj-complete) {
  visibility: hidden; }

oj-input-date-time:not(.oj-complete) {
  visibility: hidden; }

oj-date-picker:not(.oj-complete) {
  visibility: hidden; }

oj-calendar:not(.oj-complete) {
  visibility: hidden; }

.oj-inputdatetime,
.oj-inputdatetime-date-time,
.oj-inputdatetime-date-only,
.oj-inputdatetime-time-only {
  /* use a width of 100% and then max and min width so that when 
         there's less room for the form control it can automatically 
         get smaller instead of overflowing its boundaries */
  max-width: 100%;
  min-width: 8em;
  width: 100%;
  display: inline-block;
  position: relative; }

.oj-inputdatetime-inline {
  /* use a width of 100% and then max and min width so that when 
         there's less room for the form control it can automatically 
         get smaller instead of overflowing its boundaries */
  max-width: 277px;
  min-width: 8em;
  width: 100%; }

.oj-inputdatetime-input-container {
  box-sizing: border-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  width: 100%;
  font-size: 1rem; }

.oj-inputdatetime-input {
  text-align: right;
  color: #0572ce;
  background-color: transparent;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  -webkit-flex: 1;
  flex: 1;
  min-width: 1em;
  font-family: inherit;
  font-weight: normal;
  padding: 0 0;
  height: 1.938rem;
  outline: 0; }
  html[dir="rtl"] .oj-inputdatetime-input {
    text-align: left; }
  .oj-inputdatetime-input::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputdatetime-input::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputdatetime-input:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }
  html:not([dir="rtl"]) .oj-inputdatetime-input {
    border-width: 0 0 0 0;
    border-radius: 5px 0 0 5px; }
  html[dir="rtl"] .oj-inputdatetime-input {
    border-width: 0 0 0 0;
    border-radius: 0 5px 5px 0; }

.oj-inputdatetime-input-trigger {
  box-sizing: border-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  border-style: solid;
  border-color: #0572ce;
  background-color: transparent;
  height: 1.938rem;
  line-height: 1.938rem;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  outline: 0; }
  html:not([dir="rtl"]) .oj-inputdatetime-input-trigger {
    border-width: 0 0 0 0;
    border-radius: 0 5px 5px 0; }
  html[dir="rtl"] .oj-inputdatetime-input-trigger {
    border-width: 0 0 0 0;
    border-radius: 5px 0 0 5px; }

.oj-inputdatetime.oj-warning .oj-inputdatetime-input,
.oj-inputdatetime.oj-warning .oj-inputdatetime-input-trigger {
  border-color: #ffd699; }

.oj-inputdatetime:not(.oj-read-only):not(.oj-inputdatetime-inline).oj-focus-highlight {
  outline: dotted 1px #000;
  outline: -webkit-focus-ring-color auto; }

.oj-inputdatetime.oj-invalid .oj-inputdatetime-input,
.oj-inputdatetime.oj-invalid .oj-inputdatetime-input-trigger {
  border-color: #dd6666; }

.oj-inputdatetime.oj-invalid .oj-inputdatetime-input,
.oj-inputdatetime.oj-warning .oj-inputdatetime-input {
  border-radius: 0; }
  html:not([dir="rtl"]) .oj-inputdatetime.oj-invalid .oj-inputdatetime-input, html:not([dir="rtl"])
  .oj-inputdatetime.oj-warning .oj-inputdatetime-input {
    border-width: 0 0 2px 0; }
  html[dir="rtl"] .oj-inputdatetime.oj-invalid .oj-inputdatetime-input, html[dir="rtl"]
  .oj-inputdatetime.oj-warning .oj-inputdatetime-input {
    border-width: 0 0 2px 0; }

.oj-inputdatetime.oj-invalid .oj-inputdatetime-input-trigger,
.oj-inputdatetime.oj-warning .oj-inputdatetime-input-trigger {
  border-radius: 0; }
  html:not([dir="rtl"]) .oj-inputdatetime.oj-invalid .oj-inputdatetime-input-trigger, html:not([dir="rtl"])
  .oj-inputdatetime.oj-warning .oj-inputdatetime-input-trigger {
    border-width: 0 0 2px 0; }
  html[dir="rtl"] .oj-inputdatetime.oj-invalid .oj-inputdatetime-input-trigger, html[dir="rtl"]
  .oj-inputdatetime.oj-warning .oj-inputdatetime-input-trigger {
    border-width: 0 0 2px 0; }

.oj-inputdatetime.oj-active .oj-inputdatetime-input-trigger,
.oj-inputdatetime.oj-active .oj-inputdatetime-input {
  background-color: #dcdcde; }

.oj-inputdatetime.oj-disabled .oj-inputdatetime-input {
  color: #000;
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5; }

.oj-inputdatetime.oj-disabled .oj-inputdatetime-input-trigger {
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5; }

.oj-inputdatetime.oj-read-only .oj-inputdatetime-input {
  color: #000;
  background-color: transparent;
  border-color: transparent;
  border-left-width: 0;
  border-right-width: 0;
  font-size: 1.0625rem;
  font-weight: bold;
  padding: 0; }

.oj-inputdatetime.oj-read-only .oj-inputdatetime-input-trigger {
  display: none; }

.oj-inputdatetime-calendar-icon,
.oj-inputdatetime-time-icon {
  cursor: pointer;
  padding: 0 5px;
  vertical-align: middle;
  line-height: inherit; }

.oj-inputdatetime-calendar-icon.oj-disabled,
.oj-inputdatetime-time-icon.oj-disabled {
  background-color: transparent;
  cursor: default; }

.oj-datepicker-popup .oj-popup-content {
  padding: 0; }

.oj-datepicker-wrapper {
  padding-bottom: 15px; }

/* Class for the root node that contains the floating calendar */
.oj-datepicker-content {
  position: relative;
  overflow: hidden;
  box-sizing: border-box; }
  html[dir="rtl"] .oj-datepicker-content {
    direction: rtl; }

.oj-datepicker-header {
  margin: 15px 15px 0;
  position: relative;
  background: none;
  border: 0;
  color: #3a3a3a; }

.oj-datepicker-prev-icon,
.oj-datepicker-next-icon {
  position: absolute;
  line-height: 35px; }

html:not([dir="rtl"]) .oj-datepicker-prev-icon {
  left: 2px; }

html[dir="rtl"] .oj-datepicker-prev-icon {
  right: 2px; }

html:not([dir="rtl"]) .oj-datepicker-next-icon {
  right: 2px; }

html[dir="rtl"] .oj-datepicker-next-icon {
  left: 2px; }

.oj-datepicker-title {
  margin: 0 2.2em;
  height: 35px;
  line-height: 35px;
  text-align: center; }

.oj-datepicker-title select {
  font-size: 1rem;
  margin: 1px 0;
  background-color: inherit;
  color: inherit; }

.oj-datepicker-header a.oj-enabled,
.oj-datepicker-buttonpane a.oj-enabled {
  text-decoration: none;
  color: #0572ce; }

.oj-datepicker-header a.oj-enabled.oj-hover,
.oj-datepicker-buttonpane a.oj-enabled.oj-hover {
  color: #85bae7; }

.oj-datepicker-header a.oj-enabled.oj-active,
.oj-datepicker-buttonpane a.oj-enabled.oj-active {
  color: #0572ce; }

.oj-datepicker-month-year {
  width: 100%; }

.oj-datepicker-month {
  margin-right: 20px; }

.oj-datepicker-month,
.oj-datepicker-year {
  font-size: 18px;
  width: 48%;
  min-width: 0; }

.oj-datepicker-calendar {
  border-collapse: collapse;
  margin: 0 15px;
  outline: 0 none; }

.oj-datepicker-calendar th,
.oj-datepicker-calendar td {
  border: 0;
  text-align: center; }

.oj-datepicker-calendar th {
  padding: 0;
  height: 35px;
  text-transform: uppercase;
  font-weight: normal;
  color: #0572ce; }

.oj-datepicker-calendar td {
  padding: 0; }

.oj-datepicker-calendar td span,
.oj-datepicker-calendar td a {
  display: block;
  padding: 0;
  border-radius: 50%;
  box-sizing: border-box;
  width: 35px;
  height: 35px;
  line-height: 31px;
  text-align: center; }

.oj-datepicker-calendar.oj-datepicker-weekdisplay td span,
.oj-datepicker-calendar.oj-datepicker-weekdisplay td a {
  width: 30.625px;
  height: 30.625px;
  line-height: 26.625px; }

.oj-datepicker-calendar.oj-datepicker-monthview,
.oj-datepicker-calendar.oj-datepicker-yearview {
  /* Take up space on right and bottom to make it same size as day view */
  margin-right: 35px;
  margin-bottom: 5px; }

.oj-datepicker-calendar.oj-datepicker-monthview td,
.oj-datepicker-calendar.oj-datepicker-yearview td {
  padding: 8px 3px 3px 23px; }

.oj-datepicker-calendar.oj-datepicker-monthview td span,
.oj-datepicker-calendar.oj-datepicker-monthview td a,
.oj-datepicker-calendar.oj-datepicker-yearview td span,
.oj-datepicker-calendar.oj-datepicker-yearview td a {
  width: 49px;
  height: 49px;
  line-height: 45px;
  white-space: nowrap; }

.oj-datepicker-calendar td a:focus {
  outline: none; }

.oj-datepicker-calendar td a.oj-enabled {
  background: none;
  border: 2px solid transparent;
  color: #000;
  text-decoration: none; }

.oj-datepicker-calendar td.oj-datepicker-today a.oj-hover,
.oj-datepicker-calendar td a.oj-hover {
  background-color: #85bae7;
  color: #ffffff; }

.oj-datepicker-calendar td.oj-datepicker-today a.oj-selected,
.oj-datepicker-calendar td a.oj-selected {
  font-weight: bold;
  background: #0572ce;
  color: #ffffff; }

.oj-datepicker-calendar td.oj-disabled {
  opacity: 0.5; }

.oj-datepicker-calendar td.oj-disabled span {
  color: #0572ce; }

.oj-datepicker-calendar td.oj-datepicker-other-month a.oj-enabled {
  color: #527689; }

.oj-datepicker-calendar td.oj-datepicker-today a {
  background-color: #f6f6f7;
  border: 2px solid #c8c8c8; }

.oj-datepicker-buttonpane {
  box-sizing: border-box;
  height: 35px;
  font-size: 18px;
  text-align: center;
  line-height: 35px;
  display: inline-block;
  width: 100%; }
  html[dir="rtl"] .oj-datepicker-buttonpane {
    clear: right; }

.oj-datepicker-buttonpane a {
  width: auto;
  overflow: visible; }

.oj-datepicker-buttonpane .oj-datepicker-single-button {
  display: block;
  margin-left: auto;
  margin-right: auto; }

/* with multiple calendars, need to override the width */
.oj-datepicker-content.oj-datepicker-multi {
  width: auto; }

.oj-datepicker-group {
  box-sizing: border-box; }

.oj-datepicker-multi .oj-datepicker-group {
  float: left; }
  html[dir="rtl"] .oj-datepicker-multi .oj-datepicker-group {
    float: right; }

.oj-datepicker-multi-2 .oj-datepicker-group {
  width: 50%; }

.oj-datepicker-multi-3 .oj-datepicker-group {
  width: 33.3%; }

.oj-datepicker-multi-4 .oj-datepicker-group {
  width: 25%; }

html:not([dir="rtl"]) .oj-datepicker-multi .oj-datepicker-group-last .oj-datepicker-header, html:not([dir="rtl"])
.oj-datepicker-multi .oj-datepicker-group-middle .oj-datepicker-header {
  border-left-width: 0; }

html[dir="rtl"] .oj-datepicker-multi .oj-datepicker-group-last .oj-datepicker-header, html[dir="rtl"]
.oj-datepicker-multi .oj-datepicker-group-middle .oj-datepicker-header {
  border-right-width: 0; }

.oj-datepicker-multi .oj-datepicker-buttonpane {
  clear: left; }

.oj-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0; }

.oj-datepicker-unselectable {
  opacity: 0.35; }

.oj-datepicker-calendar.oj-focus-highlight td.oj-datepicker-days-cell-over a {
  border: 2px solid #85bae7; }

.oj-datepicker-week-col {
  color: #3a3a3a;
  width: 30.625px; }

th.oj-datepicker-week-col {
  background-color: #fafafa; }

td.oj-datepicker-week-col {
  background-color: #e2e2e5; }

.oj-datepicker-inline {
  margin-bottom: 6px; }

.oj-datepicker-inline .oj-datepicker-content {
  background-color: #ffffff;
  border: 1px solid #e7e7e9; }

.oj-timepicker-popup .oj-popup-content {
  padding: 0; }

.oj-timepicker-content {
  position: relative;
  padding: 15px;
  min-width: 275px;
  box-sizing: border-box; }

.oj-timepicker-header,
.oj-timepicker-footer {
  color: #0572ce;
  font-size: 18px;
  height: 35px;
  line-height: 35px;
  background: none;
  border: 0; }

.oj-timepicker-header {
  position: relative; }

.oj-timepicker-cancel-button {
  position: absolute; }
  html:not([dir="rtl"]) .oj-timepicker-cancel-button {
    left: 0; }
  html[dir="rtl"] .oj-timepicker-cancel-button {
    right: 0; }

.oj-timepicker-ok-button {
  position: absolute; }
  html:not([dir="rtl"]) .oj-timepicker-ok-button {
    right: 0; }
  html[dir="rtl"] .oj-timepicker-ok-button {
    left: 0; }

.oj-timepicker-footer {
  box-sizing: border-box;
  text-align: center;
  display: inline-block;
  width: 100%; }

.oj-timepicker-header a.oj-enabled,
.oj-timepicker-footer a.oj-enabled {
  text-decoration: none;
  color: #0572ce; }

.oj-timepicker-header a.oj-enabled.oj-hover,
.oj-timepicker-footer a.oj-enabled.oj-hover {
  color: #85bbe7; }

.oj-timepicker-header a.oj-enabled.oj-active,
.oj-timepicker-footer a.oj-enabled.oj-active {
  color: #0572ce; }

.oj-timepicker-wheel-group {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  padding: 15px 0; }

.oj-timepicker-wheel {
  position: relative;
  height: 215px;
  width: 79px;
  overflow: hidden;
  box-sizing: border-box;
  outline: 0; }

.oj-timepicker-wheel.oj-timepicker-minute,
.oj-timepicker-wheel.oj-timepicker-meridian {
  margin-left: 4px; }

.oj-timepicker-wheel-item {
  transition: all 0.15s;
  top: -100px;
  position: absolute;
  opacity: 0;
  width: 79px;
  text-align: center;
  color: #0572ce;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center; }

.oj-timepicker-wheel-item.oj-disabled {
  color: #0572ce; }

.oj-timepicker-wheel-item-content {
  text-align: center;
  white-space: nowrap; }

.oj-timepicker-wheel.oj-focus .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position0 {
  border-radius: 5px;
  background-color: #dcdcde;
  color: #000; }

.oj-timepicker-wheel.oj-active .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position1,
.oj-timepicker-wheel.oj-active .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position2,
.oj-timepicker-wheel.oj-active .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-1,
.oj-timepicker-wheel.oj-active .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-2 {
  opacity: 1; }

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position0 {
  font-size: 46px;
  height: 54px;
  top: 78px;
  opacity: 1; }

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position1,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-1 {
  font-size: 34px;
  height: 40px; }

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position2,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-2 {
  font-size: 24px;
  height: 30px; }

.oj-timepicker-wheel-item {
  height: 20px; }

.oj-timepicker-meridian .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position0:lang(el),
.oj-timepicker-meridian .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position0:lang(ja),
.oj-timepicker-meridian .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position0:lang(ko),
.oj-timepicker-meridian .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position0:lang(zh) {
  font-size: 38px; }

.oj-timepicker-meridian .oj-timepicker-wheel-item:lang(el),
.oj-timepicker-meridian .oj-timepicker-wheel-item:lang(ja),
.oj-timepicker-meridian .oj-timepicker-wheel-item:lang(ko),
.oj-timepicker-meridian .oj-timepicker-wheel-item:lang(zh) {
  font-size: 28px; }

.oj-timepicker-meridian .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position0:lang(hi) {
  font-size: 24px; }

.oj-timepicker-meridian .oj-timepicker-wheel-item:lang(hi) {
  font-size: 18px; }

.oj-timepicker-meridian .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position0:lang(sq) {
  font-size: 16px; }

.oj-timepicker-meridian .oj-timepicker-wheel-item:lang(sq) {
  font-size: 14px; }

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position1 {
  top: 136px; }

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position2 {
  top: 180px; }

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position3,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position4,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position5,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position6,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position7 {
  top: 214px;
  visibility: hidden; }

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-1 {
  top: 34px; }

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-2 {
  top: 0; }

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-3,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-4,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-5,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-6,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-7 {
  top: -24px;
  visibility: hidden; }

.oj-form-control-inherit .oj-inputdatetime .oj-inputdatetime-input {
  text-align: inherit;
  color: inherit;
  height: 100%;
  width: 100%;
  background-color: inherit;
  border-width: 0; }

.oj-form-control-inherit .oj-inputdatetime-input-container,
.oj-form-control-inherit .oj-inputdatetime .oj-inputdatetime-input-trigger {
  height: 100%;
  background-color: inherit;
  border-width: 0; }

/* Override default options*/
.oj-inputdatetime-option-defaults {
  font-family: '{"renderMode":"native","keyboardEdit":"disabled","datePicker":{"footerLayout":"today"}}'; }

.oj-inputdatetime-calendar-icon,
.oj-inputdatetime-time-only .oj-inputdatetime-time-icon {
  display: none; }

.oj-inputdatetime-date-only .oj-inputdatetime-input,
.oj-inputdatetime-time-only .oj-inputdatetime-input {
  border-radius: 5px; }

/* radioset and checkboxset styles */
/* this styles the radio, checkbox, and their labels */
/* --------------------------------------------------------------- */
oj-radioset:not(.oj-complete) {
  visibility: hidden; }

oj-checkboxset:not(.oj-complete) {
  visibility: hidden; }

/* App developer should put a span around the input and label, and use this styleclass */
.oj-choice-row {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  margin: 0; }

.oj-choice-row-inline {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  padding-top: 1px; }

.oj-choice-row input[type="checkbox"],
.oj-choice-row input[type="radio"],
.oj-choice-row-inline input[type="checkbox"],
.oj-choice-row-inline input[type="radio"] {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

.oj-choice-row .oj-radio-label,
.oj-choice-row .oj-checkbox-label,
.oj-choice-row .oj-checkbox-label-nocomp {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto; }

.oj-radioset,
.oj-checkboxset {
  display: inline-block; }

.oj-radio-label,
.oj-checkbox-label,
.oj-checkbox-label-nocomp {
  color: #000;
  display: inline-block;
  font-size: 1rem;
  font-weight: normal;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent; }

.oj-radio-label.oj-disabled .oj-radiocheckbox-label-text,
.oj-checkbox-label.oj-disabled .oj-radiocheckbox-label-text,
.oj-checkbox-nocomp[disabled] + .oj-checkbox-label-nocomp {
  color: #000;
  opacity: 0.5; }

.oj-radio-label.oj-selected,
.oj-checkbox-label.oj-selected {
  color: #0572ce; }

.oj-radio,
.oj-checkbox,
.oj-checkbox-nocomp {
  display: inline-block; }

.oj-radioset-wrapper,
.oj-checkboxset-wrapper {
  box-sizing: border-box;
  background-color: #ffffff; }

.oj-checkboxset-no-chrome .oj-checkboxset-wrapper,
.oj-radioset-no-chrome .oj-radioset-wrapper {
  background-color: inherit; }

.oj-radioset-wrapper,
.oj-checkboxset-wrapper {
  border-color: #e7e7e9;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px; }

.oj-checkboxset-no-chrome .oj-checkboxset-wrapper,
.oj-radioset-no-chrome .oj-radioset-wrapper {
  border-width: 0; }

.oj-radioset .oj-choice-row.oj-active,
.oj-radioset .oj-choice-row-inline.oj-active,
.oj-checkboxset:not(.oj-checkboxset-single) .oj-choice-row.oj-active,
.oj-checkboxset:not(.oj-checkboxset-single).oj-choice-row-inline.oj-active {
  background-color: #dcdcde; }

.oj-radioset .oj-choice-row.oj-active
.oj-checkboxset:not(.oj-checkboxset-single) .oj-choice-row.oj-active {
  border-top: 1px solid #bababc; }

.oj-choice-row-inline {
  margin: 0;
  padding-top: 0; }

.oj-radioset .oj-choice-row:first-child,
.oj-checkboxset .oj-choice-row:first-child {
  border-top: 1px transparent solid; }

.oj-radioset .oj-choice-row,
.oj-checkboxset .oj-choice-row {
  border-top: 1px #e7e7e9 solid;
  padding-top: 0; }

.oj-radioset .oj-choice-row.oj-active + .oj-choice-row,
.oj-checkboxset:not(.oj-checkboxset-single) .oj-choice-row.oj-active + .oj-choice-row {
  border-top: 1px solid #bababc; }

.oj-radioset .oj-choice-row:last-child.oj-active,
.oj-checkboxset:not(.oj-checkboxset-single) .oj-choice-row:last-child.oj-active {
  border-bottom: 1px solid #bababc; }

.oj-choice-row:last-child {
  border-bottom: 1px solid transparent; }

.oj-choice-row,
.oj-choice-row-inline {
  position: relative;
  min-height: 2.6rem;
  height: 2.6rem; }

.oj-form-control-inherit .oj-checkboxset-single .oj-choice-row,
.oj-form-control-inherit .oj-checkboxset-single .oj-checkboxset-wrapper {
  margin-bottom: 0;
  height: 100%;
  min-height: 100%; }

.oj-choice-row.oj-focus-highlight .oj-radiocheckbox-icon {
  outline: dotted 1px #000;
  outline: -webkit-focus-ring-color auto; }

.oj-radio,
.oj-checkbox {
  position: absolute;
  top: 33%; }

html:not([dir="rtl"]) .oj-checkbox-label-nocomp {
  margin-right: 1.5em; }

html[dir="rtl"] .oj-checkbox-label-nocomp {
  margin-left: 1.5em; }

.oj-radio-label,
.oj-checkbox-label,
.oj-checkbox-label-nocomp {
  padding: 0 10px 0 10px; }
  html:not([dir="rtl"]) .oj-radio-label, html:not([dir="rtl"])
  .oj-checkbox-label, html:not([dir="rtl"])
  .oj-checkbox-label-nocomp {
    text-align: left; }
  html[dir="rtl"] .oj-radio-label, html[dir="rtl"]
  .oj-checkbox-label, html[dir="rtl"]
  .oj-checkbox-label-nocomp {
    text-align: right; }

html:not([dir="rtl"]) .oj-form-control-inherit .oj-checkbox-label {
  text-align: inherit; }

html[dir="rtl"] .oj-form-control-inherit .oj-checkbox-label {
  text-align: inherit; }

.oj-choice-row-inline {
  border-top-width: 0; }

.oj-radioset,
.oj-checkboxset {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 8em;
  width: 100%; }

.oj-radioset.oj-invalid .oj-radioset-wrapper,
.oj-checkboxset.oj-invalid .oj-checkboxset-wrapper {
  border: 2px solid #dd6666; }

.oj-radioset.oj-warning .oj-radioset-wrapper,
.oj-checkboxset.oj-warning .oj-checkboxset-wrapper {
  border: 2px solid #ffd699; }

.oj-radio-label,
.oj-checkbox-label {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  height: 100%; }

.oj-radiocheckbox-label-text {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-order: 0;
  order: 0; }

.oj-form .oj-checkboxset-single .oj-checkbox-label {
  justify-content: flex-end; }

.oj-form .oj-checkboxset-single .oj-radiocheckbox-label-text {
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto; }

.oj-radiocheckbox-icon {
  box-sizing: border-box;
  background-repeat: no-repeat;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-order: 1;
  order: 1; }

.oj-radio-label .oj-radiocheckbox-icon {
  background-image: url("images/radio_ena_unselected.svg"); }

.oj-radio-label.oj-selected .oj-radiocheckbox-icon {
  background-image: url("images/radio_ena_selected.svg"); }

.oj-radio-label.oj-active .oj-radiocheckbox-icon {
  background-image: url("images/radio_pressed_unselected.svg"); }

.oj-radio-label.oj-selected.oj-active .oj-radiocheckbox-icon {
  background-image: url("images/radio_pressed_selected.svg"); }

.oj-radio-label.oj-disabled .oj-radiocheckbox-icon {
  background-image: url("images/radio_dis_unselected.svg"); }

.oj-radio-label.oj-disabled.oj-selected .oj-radiocheckbox-icon {
  background-image: url("images/radio_dis_selected.svg"); }

.oj-checkbox-label .oj-radiocheckbox-icon {
  background-image: url("images/checkbox_ena_unselected.svg"); }

.oj-checkbox-label.oj-selected .oj-radiocheckbox-icon {
  background-image: url("images/checkbox_ena_selected.svg"); }

.oj-checkbox-label.oj-active .oj-radiocheckbox-icon {
  background-image: url("images/checkbox_pressed_unselected.svg"); }

.oj-checkbox-label.oj-active.oj-selected .oj-radiocheckbox-icon {
  background-image: url("images/checkbox_pressed_selected.svg"); }

.oj-checkbox-label.oj-disabled .oj-radiocheckbox-icon {
  background-image: url("images/checkbox_dis_unselected.svg"); }

.oj-checkbox-label.oj-disabled.oj-selected .oj-radiocheckbox-icon {
  background-image: url("images/checkbox_dis_selected.svg"); }

.oj-checkboxset-single .oj-checkbox-label.oj-hover:not(.oj-active) .oj-radiocheckbox-icon {
  background-image: url("images/cbsingle_hover_unselected.svg"); }

.oj-checkboxset-single .oj-checkbox-label.oj-hover.oj-selected:not(.oj-active) .oj-radiocheckbox-icon {
  background-image: url("images/cbsingle_hover_selected.svg"); }

.oj-hicontrast .oj-radioset .oj-radio-label .oj-radiocheckbox-icon,
.oj-hicontrast .oj-checkboxset .oj-checkbox-label .oj-radiocheckbox-icon {
  background-image: none; }

.oj-hicontrast .oj-checkboxset .oj-checkbox-label.oj-selected .oj-radiocheckbox-icon:after {
  content: url("images/checkbox_ena_selected.svg"); }

.oj-hicontrast .oj-radioset .oj-radio-label.oj-selected .oj-radiocheckbox-icon:after {
  content: url("images/radio_ena_selected.svg"); }

.oj-hicontrast .oj-checkboxset .oj-checkbox-label.oj-selected.oj-disabled .oj-radiocheckbox-icon:after {
  content: url("images/checkbox_dis_selected.svg"); }

.oj-hicontrast .oj-radioset .oj-radio-label.oj-selected.oj-disabled .oj-radiocheckbox-icon:after {
  content: url("images/radio_dis_selected.svg"); }

.oj-hicontrast .oj-checkboxset-single .oj-checkbox-label.oj-hover:not(.oj-active) .oj-radiocheckbox-icon,
.oj-hicontrast .oj-checkboxset-single .oj-checkbox-label.oj-hover.oj-selected:not(.oj-active) .oj-radiocheckbox-icon {
  background-image: none; }

@media print {
  .oj-radioset .oj-radio-label .oj-radiocheckbox-icon,
  .oj-checkboxset .oj-checkbox-label .oj-radiocheckbox-icon,
  .oj-checkboxset-single .oj-checkbox-label.oj-hover:not(.oj-active) .oj-radiocheckbox-icon,
  .oj-checkboxset-single .oj-checkbox-label.oj-hover.oj-selected:not(.oj-active) .oj-radiocheckbox-icon {
    background-image: none; }
  .oj-radioset .oj-radio-label.oj-selected .oj-radiocheckbox-icon:after {
    content: url("images/radio_ena_selected.svg"); }
  .oj-checkboxset .oj-checkbox-label.oj-selected .oj-radiocheckbox-icon:after {
    content: url("images/checkbox_ena_selected.svg"); }
  .oj-radioset .oj-radio-label.oj-selected.oj-disabled .oj-radiocheckbox-icon:after {
    content: url("images/radio_dis_selected.svg"); }
  .oj-checkboxset .oj-checkbox-label.oj-selected.oj-disabled .oj-radiocheckbox-icon:after {
    content: url("images/checkbox_dis_selected.svg"); } }

.oj-radioset-input-start .oj-radiocheckbox-label-text,
.oj-checkboxset-input-start .oj-radiocheckbox-label-text,
.oj-radioset-input-end .oj-radiocheckbox-icon,
.oj-checkboxset-input-end .oj-radiocheckbox-icon {
  -webkit-order: 1;
  order: 1; }

.oj-radioset-input-start .oj-radiocheckbox-icon,
.oj-checkboxset-input-start .oj-radiocheckbox-icon,
.oj-radioset-input-end .oj-radiocheckbox-label-text,
.oj-checkboxset-input-end .oj-radiocheckbox-label-text {
  -webkit-order: 0;
  order: 0; }

/* Send to the client the renderInputAs variable value  */
.oj-radioset-option-defaults {
  font-family: '{"renderInputAs":"backgroundImage"}'; }

.oj-checkboxset-option-defaults {
  font-family: '{"renderInputAs":"backgroundImage"}'; }

.oj-radioset .oj-choice-row,
.oj-checkboxset .oj-choice-row {
  background-image: linear-gradient(#e7e7e9, #e7e7e9);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  box-sizing: border-box; }
  html:not([dir="rtl"]) .oj-radioset .oj-choice-row, html:not([dir="rtl"])
  .oj-checkboxset .oj-choice-row {
    background-position: 10px 0; }
  html[dir="rtl"] .oj-radioset .oj-choice-row, html[dir="rtl"]
  .oj-checkboxset .oj-choice-row {
    background-position: -10px 0; }

html:not([dir="rtl"]) .oj-radioset-input-start .oj-choice-row, html:not([dir="rtl"])
.oj-checkboxset-input-start .oj-choice-row {
  background-position: 36px 0; }

html[dir="rtl"] .oj-radioset-input-start .oj-choice-row, html[dir="rtl"]
.oj-checkboxset-input-start .oj-choice-row {
  background-position: -36px 0; }

html:not([dir="rtl"]) .oj-radioset-input-end .oj-choice-row, html:not([dir="rtl"])
.oj-checkboxset-input-end .oj-choice-row {
  background-position: 10px 0; }

html[dir="rtl"] .oj-radioset-input-end .oj-choice-row, html[dir="rtl"]
.oj-checkboxset-input-end .oj-choice-row {
  background-position: -10px 0; }

.oj-radioset .oj-choice-row:first-child,
.oj-checkboxset .oj-choice-row:first-child {
  background-size: 0;
  background-image: none; }

.oj-radioset .oj-choice-row:not(:first-child),
.oj-checkboxset .oj-choice-row:not(:first-child) {
  border-top: 1px solid transparent; }

.oj-radioset .oj-choice-row:not(.oj-disabled):active,
.oj-radioset .oj-choice-row:not(.oj-disabled):active + .oj-choice-row,
.oj-checkboxset .oj-choice-row:not(.oj-disabled):active,
.oj-checkboxset .oj-choice-row:not(.oj-disabled):active + .oj-choice-row {
  background-size: 0;
  background-image: none; }

.oj-radio-label .oj-radiocheckbox-icon,
.oj-checkbox-label .oj-radiocheckbox-icon {
  width: 1rem;
  height: 1rem; }

.oj-radiocheckbox-icon {
  background-size: 100% 100%; }
  html:not([dir="rtl"]) .oj-radiocheckbox-icon {
    margin: 0 0 0 10px; }
  html[dir="rtl"] .oj-radiocheckbox-icon {
    margin: 0 10px 0 0; }

html:not([dir="rtl"]) .oj-radioset-input-start .oj-radiocheckbox-icon, html:not([dir="rtl"])
.oj-checkboxset-input-start .oj-radiocheckbox-icon {
  margin: 0 10px 0 0; }

html[dir="rtl"] .oj-radioset-input-start .oj-radiocheckbox-icon, html[dir="rtl"]
.oj-checkboxset-input-start .oj-radiocheckbox-icon {
  margin: 0 0 0 10px; }

html:not([dir="rtl"]) .oj-radioset-input-end .oj-radiocheckbox-icon, html:not([dir="rtl"])
.oj-checkboxset-input-end .oj-radiocheckbox-icon {
  margin: 0 0 0 10px; }

html[dir="rtl"] .oj-radioset-input-end .oj-radiocheckbox-icon, html[dir="rtl"]
.oj-checkboxset-input-end .oj-radiocheckbox-icon {
  margin: 0 10px 0 0; }

html:not([dir="rtl"]) .oj-radio, html:not([dir="rtl"])
.oj-checkbox {
  right: 13px;
  left: auto; }

html[dir="rtl"] .oj-radio, html[dir="rtl"]
.oj-checkbox {
  left: 13px; }

html:not([dir="rtl"]) .oj-radioset-input-start .oj-radio, html:not([dir="rtl"])
.oj-checkboxset-input-start .oj-checkbox {
  left: 13px; }

html[dir="rtl"] .oj-radioset-input-start .oj-radio, html[dir="rtl"]
.oj-checkboxset-input-start .oj-checkbox {
  right: 13px;
  left: auto; }

html:not([dir="rtl"]) .oj-radioset-input-end .oj-radio, html:not([dir="rtl"])
.oj-checkboxset-input-end .oj-checkbox {
  right: 13px;
  left: auto; }

html[dir="rtl"] .oj-radioset-input-end .oj-radio, html[dir="rtl"]
.oj-checkboxset-input-end .oj-checkbox {
  left: 13px; }

.oj-radio-label .oj-radiocheckbox-icon,
.oj-checkbox-label .oj-radiocheckbox-icon {
  background-image: none; }

.oj-radio-label.oj-disabled .oj-radiocheckbox-icon,
.oj-checkbox-label.oj-disabled .oj-radiocheckbox-icon {
  background-image: none; }

.oj-radio-label.oj-active .oj-radiocheckbox-icon,
.oj-checkbox-label.oj-active .oj-radiocheckbox-icon {
  background-image: none; }

.oj-radio-label.oj-active.oj-selected .oj-radiocheckbox-icon {
  background-image: url("images/radio_ena_selected.svg"); }

.oj-checkbox-label.oj-active.oj-selected .oj-radiocheckbox-icon {
  background-image: url("images/checkbox_ena_selected.svg"); }

.oj-choice-row-inline .oj-radio-label .oj-radiocheckbox-icon,
.oj-choice-row-inline .oj-checkbox-label .oj-radiocheckbox-icon,
.oj-checkboxset-single .oj-checkbox-label .oj-radiocheckbox-icon {
  width: 22px;
  height: 22px; }

.oj-choice-row-inline .oj-radio-label .oj-radiocheckbox-icon,
.oj-choice-row-inline .oj-checkbox-label .oj-radiocheckbox-icon,
.oj-checkboxset-single .oj-checkbox-label .oj-radiocheckbox-icon {
  background-image: url("images/cbsingle_ena_unselected.svg"); }

.oj-choice-row-inline .oj-radio-label.oj-selected .oj-radiocheckbox-icon,
.oj-choice-row-inline .oj-checkbox-label.oj-selected .oj-radiocheckbox-icon,
.oj-checkboxset-single .oj-checkbox-label.oj-selected .oj-radiocheckbox-icon {
  background-image: url("images/cbsingle_ena_selected.svg"); }

.oj-choice-row-inline .oj-radio-label:active .oj-radiocheckbox-icon,
.oj-choice-row-inline .oj-checkbox-label:active .oj-radiocheckbox-icon,
.oj-checkboxset-single .oj-checkbox-label:active .oj-radiocheckbox-icon {
  background-image: url("images/cbsingle_pressed_unselected.svg"); }

.oj-choice-row-inline .oj-radio-label:active.oj-selected .oj-radiocheckbox-icon,
.oj-choice-row-inline .oj-checkbox-label:active.oj-selected .oj-radiocheckbox-icon,
.oj-checkboxset-single .oj-checkbox-label:active.oj-selected .oj-radiocheckbox-icon {
  background-image: url("images/cbsingle_pressed_selected.svg"); }

.oj-choice-row-inline .oj-radio-label.oj-disabled .oj-radiocheckbox-icon,
.oj-choice-row-inline .oj-checkbox-label.oj-disabled .oj-radiocheckbox-icon,
.oj-checkboxset-single .oj-checkbox-label.oj-disabled .oj-radiocheckbox-icon {
  background-image: url("images/cbsingle_dis_unselected.svg"); }

.oj-choice-row-inline .oj-radio-label.oj-disabled.oj-selected .oj-radiocheckbox-icon,
.oj-choice-row-inline .oj-checkbox-label.oj-disabled.oj-selected .oj-radiocheckbox-icon,
.oj-checkboxset-single .oj-checkbox-label.oj-disabled.oj-selected .oj-radiocheckbox-icon {
  background-image: url("images/cbsingle_dis_selected.svg"); }

.oj-hicontrast .oj-choice-row-inline .oj-radio-label .oj-radiocheckbox-icon,
.oj-hicontrast .oj-choice-row-inline .oj-checkbox-label .oj-radiocheckbox-icon,
.oj-hicontrast .oj-checkboxset-single .oj-checkbox-label .oj-radiocheckbox-icon {
  background-image: none; }

.oj-hicontrast .oj-choice-row-inline .oj-radio-label.oj-selected .oj-radiocheckbox-icon:after,
.oj-hicontrast .oj-choice-row-inline .oj-checkbox-label.oj-selected .oj-radiocheckbox-icon:after,
.oj-hicontrast .oj-checkboxset-single .oj-checkbox-label.oj-selected .oj-radiocheckbox-icon:after {
  content: url("images/cbsingle_ena_selected.svg"); }

.oj-hicontrast .oj-choice-row-inline .oj-radio-label.oj-selected.oj-disabled .oj-radiocheckbox-icon:after,
.oj-hicontrast .oj-choice-row-inline .oj-checkbox-label.oj-selected.oj-disabled .oj-radiocheckbox-icon:after,
.oj-hicontrast .oj-checkboxset-single .oj-checkbox-label.oj-selected.oj-disabled .oj-radiocheckbox-icon:after {
  content: url("images/cbsingle_dis_selected.svg"); }

@media print {
  .oj-choice-row-inline .oj-radio-label .oj-radiocheckbox-icon,
  .oj-choice-row-inline .oj-checkbox-label .oj-radiocheckbox-icon,
  .oj-checkboxset-single .oj-checkbox-label .oj-radiocheckbox-icon {
    background-image: none; }
  .oj-choice-row-inline .oj-radio-label.oj-selected .oj-radiocheckbox-icon:after,
  .oj-choice-row-inline .oj-checkbox-label.oj-selected .oj-radiocheckbox-icon:after,
  .oj-checkboxset-single .oj-checkbox-label.oj-selected .oj-radiocheckbox-icon:after {
    content: url("images/cbsingle_ena_selected.svg"); }
  .oj-choice-row-inline .oj-radio-label.oj-selected.oj-disabled .oj-radiocheckbox-icon:after,
  .oj-choice-row-inline .oj-checkbox-label.oj-selected.oj-disabled .oj-radiocheckbox-icon:after,
  .oj-checkboxset-single .oj-checkbox-label.oj-selected.oj-disabled .oj-radiocheckbox-icon:after {
    content: url("images/cbsingle_dis_selected.svg"); } }

/* combobox */
/* --------------------------------------------------------------- */
oj-combobox:not(.oj-complete) {
  visibility: hidden; }

.oj-combobox {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  min-width: 8em;
  width: 100%;
  font-size: 1rem; }

/* single-select */
/* 
     * Applied to the single-select box which includes the input field and the dropdown open icon
     */
.oj-combobox-choice {
  text-align: right;
  color: #000;
  background-color: transparent;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  height: 1.938rem;
  width: 100%;
  outline: 0;
  overflow: hidden;
  white-space: nowrap;
  background-clip: padding-box; }
  html[dir="rtl"] .oj-combobox-choice {
    text-align: left; }
  .oj-combobox-choice::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-combobox-choice::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-combobox-choice:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }
  html:not([dir="rtl"]) .oj-combobox-choice {
    padding-left: 0; }
  html[dir="rtl"] .oj-combobox-choice {
    padding-right: 0; }

/* 
     * Applied to the input field
     */
.oj-combobox-input {
  box-shadow: none;
  -webkit-flex: 1;
  flex: 1;
  border: 0;
  outline: 0;
  padding: 0;
  background-color: transparent;
  color: #000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1rem; }
  .oj-combobox-input::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-combobox-input::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-combobox-input:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }

/* 
     * Applied to the single-select drop down arrow
     */
.oj-combobox-arrow {
  box-sizing: border-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  text-decoration: none; }

.oj-combobox-arrow:hover, .oj-combobox-arrow:focus {
  text-decoration: none; }

/*
     * Applied to the divider between the input and drop down arrow
     */
.oj-combobox-divider {
  box-sizing: border-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  border-left: solid 0 #0572ce;
  height: 80%;
  vertical-align: middle; }

/* multi-select */
/* 
     * Applied to the multi-select box which includes the input field and the selected choices
     */
.oj-combobox-choices {
  box-sizing: border-box;
  text-align: right;
  color: #000;
  background-color: transparent;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  height: auto;
  min-height: 1.938rem;
  margin: 0;
  position: relative;
  cursor: text;
  overflow: hidden;
  padding-bottom: 5px; }
  html[dir="rtl"] .oj-combobox-choices {
    text-align: left; }
  .oj-combobox-choices::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-combobox-choices::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-combobox-choices:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }
  html:not([dir="rtl"]) .oj-combobox-choices {
    padding-left: 0; }
  html[dir="rtl"] .oj-combobox-choices {
    padding-right: 0; }

/* 
     * Applied to the multi-select box list items which include the search field and the selected choices
     */
.oj-combobox-choices li {
  list-style: none; }
  html:not([dir="rtl"]) .oj-combobox-choices li {
    float: left; }
  html[dir="rtl"] .oj-combobox-choices li {
    float: right; }

/* 
     * Applied to the multi-select search field which is an li to wrap the input
     */
.oj-combobox-search-field {
  margin-top: 5px;
  padding: 0;
  white-space: nowrap;
  line-height: 1.7442rem; }

/* 
     * Applied to the multi-select selected choice
     */
.oj-combobox-selected-choice {
  line-height: 1.8rem;
  cursor: default;
  border-radius: 2px;
  border: 1px solid #0572ce;
  color: #0572ce;
  background-clip: padding-box; }
  html:not([dir="rtl"]) .oj-combobox-selected-choice {
    padding: 0 4px 0 7px;
    margin: 5px 6px 0 0; }
  html[dir="rtl"] .oj-combobox-selected-choice {
    padding: 0 7px 0 4px;
    margin: 5px 0 0 6px; }

/* 
     * Applied to the multi-select selected choice when getting focus
     */
.oj-combobox-selected-choice.oj-focus {
  outline: dotted 1px #ffffff;
  outline: -webkit-focus-ring-color auto; }

/* 
     * Applied to the label of the selected choice
     */
.oj-combobox-selected-choice-label {
  display: inline-block;
  vertical-align: middle; }

/*
     * Applied to the clear entry field of the selected choice
     */
.oj-combobox-clear-entry {
  display: inline-block;
  outline: none;
  text-align: center;
  vertical-align: middle;
  line-height: 100%; }
  html:not([dir="rtl"]) .oj-combobox-clear-entry {
    right: 3px; }
  html[dir="rtl"] .oj-combobox-clear-entry {
    left: 3px; }

/* end multiselect */
/* 
     * Invalid styling for the widget 
     */
.oj-combobox.oj-invalid .oj-combobox-choice,
.oj-combobox-multi.oj-invalid .oj-combobox-choices {
  border-width: 0 0 2px 0;
  border-radius: 0;
  border-style: solid;
  border-color: #dd6666; }

/* 
     * Warning styling for the widget 
     */
.oj-combobox.oj-warning .oj-combobox-choice,
.oj-combobox-multi.oj-warning .oj-combobox-choices {
  border-width: 0 0 2px 0;
  border-radius: 0;
  border-style: solid;
  border-color: #ffd699; }

/* 
     * Disabled styles for single-select 
     */
.oj-combobox.oj-disabled .oj-combobox-choice,
.oj-combobox.oj-disabled input {
  color: #000;
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5; }

.oj-combobox.oj-disabled input {
  border: 0; }

.oj-combobox.oj-disabled .oj-combobox-arrow {
  cursor: default; }

.oj-combobox.oj-disabled .oj-combobox-divider {
  border-color: #0572ce; }

/* 
     * Disabled styles for multi-select 
     */
.oj-combobox-multi.oj-disabled .oj-combobox-choices,
.oj-combobox-multi.oj-disabled .oj-combobox-selected-choice,
.oj-combobox-multi.oj-disabled .oj-combobox-selected-choice.oj-focus,
.oj-combobox-multi.oj-disabled input {
  color: #000;
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5;
  outline: 0; }

.oj-combobox-multi.oj-disabled input {
  border: 0; }

.oj-combobox-multi.oj-disabled .oj-combobox-clear-entry {
  display: none;
  background: none; }

/*
     * Styling for focus state
     */
/* icon */
/* -----------------------------*/
/* 
     * Applied to the clear entry icon
     */
.oj-combobox-clear-entry-icon {
  text-align: center;
  vertical-align: middle;
  cursor: pointer; }

/* icon */
/* -----------------------------*/
/* 
     * Applied to the single-select drop down open icon
     */
.oj-combobox-open-icon {
  line-height: inherit;
  padding-right: 5px;
  padding-left: 5px; }

/* clear entry icon for combobox */
.oj-form-control-inherit .oj-combobox .oj-combobox-choice,
.oj-form-control-inherit .oj-combobox .oj-combobox-choices,
.oj-form-control-inherit .oj-combobox-input {
  text-align: inherit;
  color: inherit;
  height: 100%;
  width: 100%;
  background-color: inherit;
  border-width: 0; }

/* 
     * Applied to the multi-select search field which is an li to wrap the input
     */
.oj-combobox-search-field {
  line-height: 1.938rem; }

/* icon */
/* -----------------------------*/
/* 
     * Applied to the single-select drop down open icon
     */
.oj-combobox-open-icon {
  margin-top: 2px; }

/* select */
/* --------------------------------------------------------------- */
oj-select:not(.oj-complete) {
  visibility: hidden; }

.oj-select {
  position: relative;
  display: inline-block;
  max-width: 100%;
  min-width: 8em;
  width: 100%;
  font-size: 1rem;
  box-sizing: border-box; }

/* 
     * Suppress focus ring around the select box 
     */
.oj-select .oj-select-choice:focus {
  outline: none; }

.oj-select .oj-select-choice.oj-focus-highlight {
  outline: dotted 1px #000;
  outline: -webkit-focus-ring-color auto; }

/* 
     * Applied to the select box which includes the selected text and the dropdown open icon
     */
.oj-select-choice {
  text-align: right;
  color: #0572ce;
  background-color: transparent;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background-clip: padding-box;
  text-overflow: ellipsis;
  height: 1.938rem; }
  html[dir="rtl"] .oj-select-choice {
    text-align: left; }
  .oj-select-choice::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-select-choice::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-select-choice:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }
  html:not([dir="rtl"]) .oj-select-choice {
    padding-left: 0;
    padding-right: 0; }
  html[dir="rtl"] .oj-select-choice {
    padding-left: 0;
    padding-right: 0; }

/* multi-select */
/* 
     * Applied to the multi-select box which includes the input field and the selected choices
     */
.oj-select-choices {
  box-sizing: border-box;
  text-align: right;
  color: #000;
  background-color: transparent;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  height: auto;
  min-height: 1.938rem;
  margin: 0;
  position: relative;
  cursor: text;
  overflow: hidden;
  padding: 0 0 5px; }
  html[dir="rtl"] .oj-select-choices {
    text-align: left; }
  .oj-select-choices::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-select-choices::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-select-choices:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }

/* 
     * Applied to the multi-select box list items which include the search field and the selected choices
     */
.oj-select-choices li {
  list-style: none; }
  html:not([dir="rtl"]) .oj-select-choices li {
    float: left; }
  html[dir="rtl"] .oj-select-choices li {
    float: right; }

/* 
     * Applied to the multi-select search field which is an li to wrap the input
     */
.oj-select-search-field {
  margin-top: 5px;
  padding: 0;
  white-space: nowrap;
  line-height: 1.7442rem; }

/* 
     * Applied to the input field. Override default .oj-listbox-input
     */
.oj-select-multi .oj-listbox-input {
  color: #000;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.0625rem;
  padding-top: 0;
  padding-bottom: 0; }
  .oj-select-multi .oj-listbox-input::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-select-multi .oj-listbox-input::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-select-multi .oj-listbox-input:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }
  html:not([dir="rtl"]) .oj-select-multi .oj-listbox-input {
    padding-right: 0;
    padding-left: 0; }
  html[dir="rtl"] .oj-select-multi .oj-listbox-input {
    padding-left: 0;
    padding-right: 0; }

/* 
     * Applied to the multi-select selected choice
     */
.oj-select-selected-choice {
  position: relative;
  line-height: 1.8rem;
  cursor: default;
  border-radius: 2px;
  border: 1px solid #0572ce;
  color: #0572ce;
  background-clip: padding-box; }
  html:not([dir="rtl"]) .oj-select-selected-choice {
    padding: 0 4px 0 7px;
    margin: 5px 6px 0 0; }
  html[dir="rtl"] .oj-select-selected-choice {
    padding: 0 7px 0 4px;
    margin: 5px 0 0 6px; }

/* 
     * Applied to the multi-select selected choice when getting focus
     */
.oj-select-selected-choice.oj-focus {
  outline: dotted 1px #ffffff;
  outline: -webkit-focus-ring-color auto; }

/* 
     * Applied to the label of the selected choice
     */
.oj-select-selected-choice-label {
  display: inline-block;
  vertical-align: middle; }

/*
     * Applied to the clear entry field of the selected choice
     */
.oj-select-clear-entry {
  display: inline-block;
  outline: none;
  text-align: center;
  vertical-align: middle;
  line-height: 100%; }
  html:not([dir="rtl"]) .oj-select-clear-entry {
    right: 3px; }
  html[dir="rtl"] .oj-select-clear-entry {
    left: 3px; }

/* end multiselect */
/* Invalid styling for the widget */
.oj-select.oj-invalid .oj-select-choice,
.oj-select-native.oj-invalid .oj-select-select,
.oj-select-multi.oj-invalid .oj-select-choices {
  border-width: 0 0 2px 0;
  border-radius: 0;
  border-style: solid;
  border-color: #dd6666; }

/* Warning styling for the widget */
.oj-select.oj-warning .oj-select-choice,
.oj-select-native.oj-warning .oj-select-select,
.oj-select-multi.oj-warning .oj-select-choices {
  border-width: 0 0 2px 0;
  border-radius: 0;
  border-style: solid;
  border-color: #ffd699; }

/* disabled styles  for single-select */
.oj-select.oj-disabled .oj-select-choice {
  color: #000;
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5; }

/* 
     * Disabled styles for multi-select 
     */
.oj-select-multi.oj-disabled .oj-select-choices,
.oj-select-multi.oj-disabled .oj-select-selected-choice,
.oj-select-multi.oj-disabled .oj-select-selected-choice.oj-focus,
.oj-select-multi.oj-disabled input {
  color: #000;
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5;
  outline: 0; }

.oj-select-multi.oj-disabled .oj-select-clear-entry {
  display: none;
  background: none; }

/* 
     * Applied to the place holder text
     */
.oj-select-chosen.oj-select-default {
  color: #646464; }

/* 
     * Applied to the selected text
     */
.oj-select-chosen {
  border: 0;
  outline: 0;
  white-space: nowrap;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: none;
  box-sizing: border-box; }
  html:not([dir="rtl"]) .oj-select-chosen {
    padding-right: 0; }
  html[dir="rtl"] .oj-select-chosen {
    padding-left: 0; }

/* 
     * Applied to the dropdown open icon in jet theme
     */
.oj-select-jet .oj-select-arrow {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle; }

.oj-hicontrast .oj-select.oj-disabled {
  border-style: dotted; }

/* 
     * Applied to the dropdown open icon
     */
html[dir="rtl"] .oj-select-open-icon {
  padding-right: 5px;
  padding-left: 5px; }

html:not([dir="rtl"]) .oj-select-open-icon {
  padding-left: 5px;
  padding-right: 5px; }

.oj-select-open-icon,
.oj-select-open-icon:hover,
.oj-select-open-icon:focus {
  text-decoration: none; }

.oj-select-multiple-open-icon {
  font-size: 24px; }
  html[dir="rtl"] .oj-select-multiple-open-icon {
    padding-right: 1px;
    padding-left: 1px; }
  html:not([dir="rtl"]) .oj-select-multiple-open-icon {
    padding-left: 1px;
    padding-right: 1px; }

/* clear entry icon */
/* Override default options*/
.oj-select-option-defaults {
  font-family: '{"renderMode":"native"}'; }

.oj-select-native .oj-select-arrow {
  display: inline-block;
  text-align: center;
  position: absolute;
  top: calc(50% - 1rem);
  line-height: 1.938rem;
  pointer-events: none; }
  html:not([dir="rtl"]) .oj-select-native .oj-select-arrow {
    right: 0; }
  html[dir="rtl"] .oj-select-native .oj-select-arrow {
    left: 0; }

.oj-select-native.oj-disabled .oj-select-arrow {
  opacity: 0.5; }

.oj-select-native.oj-invalid .oj-select-arrow,
.oj-select-native.oj-warning .oj-select-arrow {
  top: 0; }

.oj-select-select {
  text-align: right;
  color: #0572ce;
  background-color: transparent;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  height: 1.938rem;
  width: 100%;
  white-space: nowrap;
  background-clip: padding-box;
  padding: 0 0; }
  html[dir="rtl"] .oj-select-select {
    text-align: left; }
  .oj-select-select::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-select-select::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-select-select:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }

select.oj-select-select.oj-select-default:not([multiple]) {
  color: #646464; }

.oj-select-select[disabled] {
  color: #000;
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5; }

.oj-select-select option {
  background-color: #ffffff; }

/* 
     * Applied to focus ring around the select box 
     */
.oj-select-select:focus {
  outline: none; }

.oj-select-select.oj-focus-highlight {
  outline: dotted 1px #000;
  outline: -webkit-focus-ring-color auto; }

.oj-select-jet.oj-enabled .oj-select-choice:active,
.oj-select-native.oj-enabled .oj-select-select:active {
  background-color: #dcdcde; }

.oj-form-control-inherit .oj-select .oj-select-choice,
.oj-form-control-inherit .oj-select .oj-select-choices {
  text-align: inherit;
  color: inherit;
  height: 100%;
  width: 100%;
  background-color: inherit;
  border-width: 0; }

.oj-form-control-inherit .oj-select-select,
.oj-form-control-inherit .oj-select-chosen {
  background-color: inherit;
  border-width: 0; }

.oj-form-control-inherit .oj-select-select {
  height: 100%; }

.oj-select .oj-select-arrow {
  display: none; }

html:not([dir="rtl"]) .oj-select-select {
  direction: rtl; }

html[dir="rtl"] .oj-select-select {
  direction: ltr; }

.oj-select-multiple-open-icon {
  display: none; }

.oj-select-select::-ms-expand {
  display: none; }

.oj-select-select {
  -moz-appearance: none; }

.oj-select-select.oj-select-default[multiple] {
  color: #646464; }

/* 
     * Applied to the multi-select search field which is an li to wrap the input
     */
.oj-select-search-field {
  line-height: 1.938rem; }

/* InputSearch */
/* --------------------------------------------------------------- */
oj-input-search:not(.oj-complete) {
  visibility: hidden; }

.oj-inputsearch {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  max-width: 100%;
  min-width: 8em;
  width: 100%;
  font-size: 1.0625rem; }

/* 
     * Applied to the InputSearch box which includes the input field and the search icon
     */
.oj-inputsearch-choice {
  text-align: right;
  color: #000;
  background-color: transparent;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
  height: 1.938rem;
  width: 100%;
  outline: 0;
  overflow: hidden;
  white-space: nowrap;
  background-clip: padding-box; }
  html[dir="rtl"] .oj-inputsearch-choice {
    text-align: left; }
  .oj-inputsearch-choice::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputsearch-choice::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputsearch-choice:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }

.oj-inputsearch-choice {
  background-color: #c7c7c8; }

/* 
     * Applied to the input field
     */
.oj-inputsearch-input {
  box-shadow: none;
  -webkit-flex: 1;
  flex: 1;
  border: 0;
  outline: 0;
  padding: 0 0;
  background-color: transparent;
  color: #000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.0625rem; }
  .oj-inputsearch-input::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputsearch-input::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputsearch-input:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }

/* 
     * Applied to the search button
     */
.oj-inputsearch-search-button {
  box-sizing: border-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  text-decoration: none; }

.oj-inputsearch-search-button:hover, .oj-inputsearch-search-button:focus {
  text-decoration: none; }

/* 
     * Search button icon
     */
.oj-inputsearch-search-icon {
  line-height: inherit;
  font-size: 1.0625rem; }
  html:not([dir="rtl"]) .oj-inputsearch-search-icon {
    padding-left: 9px;
    padding-right: 6px; }
  html[dir="rtl"] .oj-inputsearch-search-icon {
    padding-right: 9px;
    padding-left: 6px; }

/*
     * Styling for focus state
     */
/* 
     * Invalid styling for the widget 
     */
.oj-inputsearch.oj-invalid .oj-inputsearch-choice {
  border-width: 2px;
  border-style: solid;
  border-color: #dd6666; }

/* 
     * Warning styling for the widget 
     */
.oj-inputsearch.oj-warning .oj-inputsearch-choice {
  border-width: 2px;
  border-style: solid;
  border-color: #ffd699; }

/* 
     * Disabled styles for single-select 
     */
.oj-inputsearch.oj-disabled .oj-inputsearch-choice,
.oj-inputsearch.oj-disabled input {
  color: #000;
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5; }

.oj-inputsearch.oj-disabled .oj-inputsearch-choice,
.oj-inputsearch.oj-disabled input {
  background-color: #c7c7c8; }

.oj-inputsearch.oj-disabled input {
  border: 0; }

.oj-inputsearch.oj-disabled .oj-inputsearch-search-button {
  cursor: default; }

.oj-form-control-inherit .oj-inputsearch-choice,
.oj-form-control-inherit .oj-inputsearch-input {
  text-align: inherit;
  color: inherit;
  height: 100%;
  width: 100%;
  background-color: inherit;
  border-width: 0; }

/* switch */
/* --------------------------------------------------------------- */
oj-switch:not(.oj-complete) {
  visibility: hidden; }

.oj-switch {
  display: inline-block;
  -webkit-tap-highlight-color: transparent; }

.oj-switch.oj-invalid .oj-switch-track,
.oj-switch.oj-default.oj-invalid .oj-switch-track,
.oj-switch:not(.oj-selected):not(.oj-hover):not(.oj-disabled):not(.oj-read-only).oj-invalid .oj-switch-track,
.oj-switch.oj-selected:not(.oj-hover):not(.oj-disabled):not(.oj-read-only).oj-invalid .oj-switch-track,
.oj-switch.oj-hover:not(.oj-selected):not(.oj-disabled):not(.oj-read-only).oj-invalid .oj-switch-track,
.oj-switch.oj-selected.oj-hover:not(.oj-disabled):not(.oj-read-only).oj-invalid .oj-switch-track,
.oj-switch.oj-disabled:not(.oj-selected):not(.oj-read-only).oj-invalid .oj-switch-track,
.oj-switch.oj-disabled.oj-selected:not(.oj-read-only).oj-invalid .oj-switch-track {
  border: 2px solid #dd6666; }

.oj-switch.oj-warning .oj-switch-track,
.oj-switch.oj-default.oj-warning .oj-switch-track,
.oj-switch:not(.oj-selected):not(.oj-hover):not(.oj-disabled):not(.oj-read-only).oj-warning .oj-switch-track,
.oj-switch.oj-selected:not(.oj-hover):not(.oj-disabled):not(.oj-read-only).oj-warning .oj-switch-track,
.oj-switch.oj-hover:not(.oj-selected):not(.oj-disabled):not(.oj-read-only).oj-warning .oj-switch-track,
.oj-switch.oj-selected.oj-hover:not(.oj-disabled):not(.oj-read-only).oj-warning .oj-switch-track,
.oj-switch.oj-disabled:not(.oj-selected):not(.oj-read-only).oj-warning .oj-switch-track,
.oj-switch.oj-disabled.oj-selected:not(.oj-read-only).oj-warning .oj-switch-track {
  border: 2px solid #ffd699; }

.oj-switch .oj-switch-container {
  position: relative;
  height: 1.938rem;
  width: 3.125994rem; }

html:not([dir="rtl"]) .oj-switch .oj-switch-thumb {
  left: 0;
  right: auto; }

html[dir="rtl"] .oj-switch .oj-switch-thumb {
  left: auto;
  right: 0; }

html:not([dir="rtl"]) .oj-switch.oj-selected .oj-switch-thumb {
  left: auto;
  right: 0; }

html[dir="rtl"] .oj-switch.oj-selected .oj-switch-thumb {
  left: 0;
  right: auto; }

.oj-switch .oj-switch-track {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 2px;
  height: calc( 1.8754026rem - 2px - 2px);
  width: calc( 3.1883976rem - 2px - 2px);
  margin-top: -0.9377013rem;
  border-radius: 1.8754026rem; }

.oj-switch.oj-read-only .oj-switch-track {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 2px;
  height: calc( 1.8754026rem - 2px - 2px);
  width: calc( 3.1883976rem - 2px - 2px);
  margin-top: -0.9377013rem;
  border-radius: 1.8754026rem; }

.oj-switch .oj-switch-track,
.oj-switch.oj-default .oj-switch-track {
  background-color: #fdfdfd;
  border-color: #e5e5e5; }

.oj-switch .oj-switch-thumb,
.oj-switch.oj-default .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc( 1.6254006rem - 1px - 1px);
  width: calc( 1.6254006rem - 1px - 1px);
  margin-top: -0.8127003rem;
  border-radius: 1.6254006rem;
  box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0 8px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
  border-color: #cfcfcf; }

.oj-switch.oj-selected .oj-switch-track {
  background-color: #0572ce;
  border-color: #0572ce; }

.oj-switch.oj-selected .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc( 1.6254006rem - 1px - 1px);
  width: calc( 1.6254006rem - 1px - 1px);
  margin-top: -0.8127003rem;
  border-radius: 1.6254006rem;
  box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0 8px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
  border-color: #0572ce; }

.oj-switch.oj-hover .oj-switch-track {
  background-color: #fdfdfd;
  border-color: #e5e5e5; }

.oj-switch.oj-hover .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc( 2.1255984rem - 1px - 1px);
  width: calc( 2.1255984rem - 1px - 1px);
  margin-top: -1.0627992rem;
  border-radius: 2.1255984rem;
  box-shadow: none;
  background-color: #daeaf8;
  border-color: #c1d0df; }

.oj-switch.oj-selected.oj-hover .oj-switch-track {
  background-color: #0572ce;
  border-color: #0572ce; }

.oj-switch.oj-selected.oj-hover .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc( 2.1255984rem - 1px - 1px);
  width: calc( 2.1255984rem - 1px - 1px);
  margin-top: -1.0627992rem;
  border-radius: 2.1255984rem;
  box-shadow: none;
  background-color: #daeaf8;
  border-color: #c1d0df; }

.oj-switch.oj-active .oj-switch-track,
.oj-switch.oj-hover.oj-active .oj-switch-thumb .oj-switch-track {
  background-color: #fdfdfd;
  border-color: #e5e5e5; }

.oj-switch.oj-active .oj-switch-thumb,
.oj-switch.oj-hover.oj-active .oj-switch-thumb .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc( 2.1255984rem - 1px - 1px);
  width: calc( 2.1255984rem - 1px - 1px);
  margin-top: -1.0627992rem;
  border-radius: 2.1255984rem;
  box-shadow: none;
  background-color: #daeaf8;
  border-color: #c1d0df; }

.oj-switch.oj-selected.oj-active .oj-switch-track,
.oj-switch.oj-selected.oj-hover.oj-active .oj-switch-thumb .oj-switch-track {
  background-color: #0572ce;
  border-color: #0572ce; }

.oj-switch.oj-selected.oj-active .oj-switch-thumb,
.oj-switch.oj-selected.oj-hover.oj-active .oj-switch-thumb .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc( 2.1255984rem - 1px - 1px);
  width: calc( 2.1255984rem - 1px - 1px);
  margin-top: -1.0627992rem;
  border-radius: 2.1255984rem;
  box-shadow: none;
  background-color: #daeaf8;
  border-color: #c1d0df; }

.oj-switch.oj-read-only .oj-switch-track {
  background-color: #fefefe;
  border-color: #000000; }

.oj-switch.oj-read-only .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc( 1.6254006rem - 1px - 1px);
  width: calc( 1.6254006rem - 1px - 1px);
  margin-top: -0.8127003rem;
  border-radius: 1.6254006rem;
  box-shadow: none;
  background-color: #ffffff;
  border-color: #000000; }

.oj-switch.oj-selected.oj-read-only .oj-switch-track {
  background-color: #000000;
  border-color: #000000; }

.oj-switch.oj-selected.oj-read-only .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc( 1.6254006rem - 1px - 1px);
  width: calc( 1.6254006rem - 1px - 1px);
  margin-top: -0.8127003rem;
  border-radius: 1.6254006rem;
  box-shadow: none;
  background-color: #ffffff;
  border-color: #ffffff; }

.oj-switch.oj-disabled .oj-switch-track {
  background-color: #fdfdfd;
  border-color: #e5e5e5; }

.oj-switch.oj-disabled .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc( 1.6254006rem - 1px - 1px);
  width: calc( 1.6254006rem - 1px - 1px);
  margin-top: -0.8127003rem;
  border-radius: 1.6254006rem;
  box-shadow: none;
  background-color: #ffffff;
  border-color: #cfcfcf; }

.oj-switch.oj-disabled.oj-selected .oj-switch-track {
  background-color: #0572ce;
  border-color: #0572ce; }

.oj-switch.oj-disabled.oj-selected .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc( 1.6254006rem - 1px - 1px);
  width: calc( 1.6254006rem - 1px - 1px);
  margin-top: -0.8127003rem;
  border-radius: 1.6254006rem;
  box-shadow: none;
  background-color: #ffffff;
  border-color: #ffffff; }

.oj-switch-thumb:focus {
  outline: none; }

.oj-switch-thumb.oj-focus-highlight {
  outline: dotted 1px #000;
  outline: -webkit-focus-ring-color auto; }

/* switch specific */
/* --------------------------------------------------------------- */
.oj-switch .oj-switch-thumb {
  margin-left: -1px;
  margin-right: -1px; }

.oj-switch.oj-disabled .oj-switch-track,
.oj-switch.oj-disabled.oj-selected .oj-switch-track {
  opacity: 0.5; }

.oj-switch.oj-read-only .oj-switch-thumb,
.oj-switch.oj-selected.oj-read-only .oj-switch-thumb {
  color: transparent; }

oj-slider:not(.oj-complete) {
  visibility: hidden; }

.oj-slider {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent; }
  html:not([dir="rtl"]) .oj-slider {
    text-align: left; }
  html[dir="rtl"] .oj-slider {
    text-align: right; }

.oj-slider.oj-slider-horizontal {
  /* use a width of 100% and then max and min width so that when 
     there's less room for the form control it can automatically 
      get smaller instead of overflowing its boundaries */
  max-width: 100%;
  min-width: 8em;
  width: 100%; }

.oj-slider.oj-slider-horizontal {
  /* This ensures that the slider bounding box will include
   the thumb radius - important for form controls. */
  padding-left: 17px;
  padding-right: 17px; }

.oj-slider.oj-slider-vertical {
  padding-left: 17px;
  padding-right: 17px; }

.oj-slider-vertical > .oj-slider-container {
  margin-top: 13px;
  margin-bottom: 13px; }

.oj-invalid .oj-slider-thumb {
  border: 2px solid #dd6666; }

.oj-warning .oj-slider-thumb {
  border: 2px solid #ffd699; }

.oj-slider-horizontal.oj-form-control .oj-slider-container {
  height: 1.938rem; }

.oj-slider-vertical.oj-form-control .oj-slider-container {
  height: 150px;
  min-height: 52px; }

.oj-slider-container {
  position: relative; }

.oj-slider-thumb {
  position: absolute;
  box-sizing: border-box;
  cursor: default;
  touch-action: none;
  background-color: #ffffff;
  border-radius: 50%;
  border: 1px solid #cfcfcf;
  box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0 8px rgba(0, 0, 0, 0.05); }

.oj-disabled .oj-slider-thumb {
  background-color: #ffffff;
  border-color: #cfcfcf; }

.oj-slider-range {
  position: absolute;
  border: 0;
  background-position: 0 0; }

.oj-slider-bar {
  border-radius: 2px;
  background-color: #b5b5b7;
  box-sizing: border-box;
  position: absolute; }

.oj-slider-vertical .oj-slider-bar, .oj-slider-vertical .oj-slider-bar-value {
  width: 2px; }

.oj-slider-vertical .oj-slider-bar {
  height: 100%; }

.oj-slider-horizontal .oj-slider-bar {
  width: 100%; }

.oj-slider-horizontal .oj-slider-bar, .oj-slider-horizontal .oj-slider-bar-value {
  height: 2px;
  top: 50%;
  margin-top: -1px; }

.oj-slider-vertical .oj-slider-bar, .oj-slider-vertical .oj-slider-bar-value {
  width: 2px;
  left: 50%;
  margin-left: -1px; }

.oj-slider-bar:after {
  content: '';
  position: absolute;
  top: -17px;
  bottom: -17px;
  left: -17px;
  right: -17px; }

.oj-slider-bar-value {
  border-radius: 2px;
  background: #0572ce; }

.oj-hicontrast .oj-slider-bar,
.oj-hicontrast .oj-slider-bar-value {
  border: 1px solid; }

.oj-hicontrast .oj-slider-horizontal .oj-slider-bar-value {
  margin-top: -2px; }

.oj-hicontrast .oj-slider-vertical .oj-slider-bar-value {
  margin-left: -2px; }

.oj-slider-bar-value.oj-active {
  background: #0572ce; }

.oj-disabled .oj-slider-bar {
  opacity: 0.5;
  background: #dadada; }

.oj-disabled .oj-slider-bar-value {
  opacity: 0.5;
  background: #858585; }

.oj-hicontrast .oj-disabled .oj-slider-bar,
.oj-hicontrast .oj-disabled .oj-slider-bar-value {
  border-style: dotted; }

.oj-slider-horizontal .oj-slider-thumb {
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  margin-left: -13px; }

html:not([dir="rtl"]) .oj-slider-horizontal .oj-slider-range-min {
  left: 0; }

html[dir="rtl"] .oj-slider-horizontal .oj-slider-range-min {
  right: 0; }

html:not([dir="rtl"]) .oj-slider-horizontal .oj-slider-range-max {
  right: 0; }

html[dir="rtl"] .oj-slider-horizontal .oj-slider-range-max {
  left: 0; }

.oj-slider-vertical .oj-slider-thumb {
  width: 26px;
  height: 26px;
  margin-bottom: -13px;
  margin-top: -13px; }
  html:not([dir="rtl"]) .oj-slider-vertical .oj-slider-thumb {
    margin-left: -13px;
    left: 50%; }
  html[dir="rtl"] .oj-slider-vertical .oj-slider-thumb {
    margin-right: -13px;
    right: 50%; }

.oj-slider-vertical .oj-slider-range-min {
  bottom: 0; }

.oj-slider-vertical .oj-slider-range-max {
  top: 0; }

.oj-hicontrast .oj-slider-thumb.oj-focus {
  border: 3px solid; }

.oj-hicontrast .oj-slider-thumb.oj-selected {
  border: 3px double; }

.oj-hicontrast .oj-disabled .oj-slider-thumb {
  border: 1px dotted; }

.oj-slider-thumb.oj-hover {
  background-color: #daeaf8; }

.oj-slider-thumb.oj-active {
  background-color: #daeaf8;
  border-color: #c1d0df; }

.oj-slider-thumb.oj-active {
  background-color: #daeaf8; }

.oj-slider-horizontal .oj-slider-thumb.oj-active {
  margin-left: -17px; }

html:not([dir="rtl"]) .oj-slider-vertical .oj-slider-thumb.oj-active {
  margin-left: -17px; }

html[dir="rtl"] .oj-slider-vertical .oj-slider-thumb.oj-active {
  margin-right: -17px; }

.oj-slider-thumb.oj-active {
  width: 34px; }

.oj-slider-horizontal .oj-slider-thumb:after {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  right: 3px; }

.oj-slider-vertical .oj-slider-thumb:after {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  right: 3px; }

.oj-slider-horizontal .oj-slider-thumb.oj-active {
  margin-top: -17px; }

.oj-slider-vertical .oj-slider-thumb.oj-active {
  margin-bottom: -17px;
  margin-top: -17px; }

.oj-slider-thumb.oj-active {
  height: 34px; }

.oj-slider-thumb.oj-active {
  background-color: #daeaf8;
  border-color: #c1d0df; }

.oj-slider-thumb:focus {
  outline: none; }

.oj-slider-thumb.oj-focus-highlight {
  outline: dotted 1px #000;
  outline: -webkit-focus-ring-color auto; }

.oj-slider-wrapper {
  display: flex;
  align-items: center; }

.oj-slider-wrapper .oj-slider.oj-form-control {
  margin-bottom: 0; }

.oj-slider-block-item {
  text-align: center; }

.oj-slider-color-picker.oj-slider-horizontal {
  /* This ensures that the slider bounding box will include
   the thumb radius - important for form controls. */
  padding-left: 17px;
  padding-right: 17px; }

.oj-slider-color-picker.oj-slider-vertical {
  padding-left: 17px;
  padding-right: 17px; }

.oj-slider-color-picker.oj-slider-vertical > .oj-slider-container {
  margin-top: 17px;
  margin-bottom: 17px; }

.oj-slider-color-picker.oj-slider-vertical.oj-form-control .oj-slider-container {
  min-height: 56px; }

.oj-slider-color-picker .oj-slider-thumb {
  background-color: transparent;
  border-width: 2px;
  border-radius: 50%; }

.oj-slider-color-picker .oj-slider-bar {
  border-radius: 8px; }

.oj-slider-color-picker.oj-slider-horizontal .oj-slider-bar, .oj-slider-color-picker.oj-slider-horizontal .oj-slider-bar-value {
  height: 8px;
  margin-top: -4px; }

.oj-slider-color-picker.oj-slider-vertical .oj-slider-bar, .oj-slider-color-picker.oj-slider-vertical .oj-slider-bar-value {
  width: 8px;
  margin-left: -4px; }

.oj-slider-color-picker .oj-slider-bar:after {
  top: -14px;
  bottom: -14px;
  left: -14px;
  right: -14px; }

.oj-slider-color-picker .oj-slider-bar-value {
  border-radius: 8px; }

.oj-slider-color-picker.oj-slider-horizontal .oj-slider-thumb {
  width: 28px;
  height: 28px;
  margin-top: -14px;
  margin-left: -14px; }

.oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb {
  width: 28px;
  height: 28px;
  margin-bottom: -14px;
  margin-top: -14px; }
  html:not([dir="rtl"]) .oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb {
    margin-left: -14px; }
  html[dir="rtl"] .oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb {
    margin-right: -14px; }

.oj-slider-color-picker.oj-slider-horizontal .oj-slider-thumb.oj-active {
  margin-left: -17px; }

html:not([dir="rtl"]) .oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb.oj-active {
  margin-left: -17px; }

html[dir="rtl"] .oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb.oj-active {
  margin-right: -17px; }

.oj-slider-color-picker .oj-slider-thumb.oj-active {
  width: 34px; }

.oj-slider-color-picker.oj-slider-horizontal .oj-slider-thumb:after {
  top: 3px;
  bottom: 3px;
  left: 3px;
  right: 3px; }

.oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb:after {
  top: 3px;
  bottom: 3px;
  left: 3px;
  right: 3px; }

.oj-slider-color-picker.oj-slider-horizontal .oj-slider-thumb.oj-active {
  margin-top: -17px; }

.oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb.oj-active {
  margin-bottom: -17px;
  margin-top: -17px; }

.oj-slider-color-picker .oj-slider-thumb.oj-active {
  height: 34px; }

.oj-slider-color-picker .oj-slider-bar-value {
  display: none; }

/* Grid HTML Classes */
.oj-flex {
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }

.oj-flex-item {
  -webkit-flex: auto;
  flex: auto;
  box-sizing: border-box; }

.deprecated-col-default-width {
  -webkit-flex: 0 1 100%;
  flex: 0 1 100%;
  max-width: 100%;
  width: 100%; }

.oj-flex-bar, .oj-hybrid-applayout-header, .oj-hybrid-applayout-header-no-border, .oj-hybrid-applayout-toolbar-stretch {
  position: relative; }

.oj-flex-bar, .oj-hybrid-applayout-header, .oj-hybrid-applayout-header-no-border, .oj-hybrid-applayout-toolbar-stretch,
.oj-flex-bar-start,
.oj-flex-bar-middle,
.oj-flex-bar-end,
.oj-flex-bar-center-absolute,
.oj-hybrid-applayout-bar-title {
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex; }

.oj-flex-bar-middle {
  -webkit-flex: auto;
  flex: auto; }

html:not([dir="rtl"]) .oj-flex-bar-end {
  margin-left: auto; }

html[dir="rtl"] .oj-flex-bar-end {
  margin-right: auto; }

.oj-flex-bar-center-absolute, .oj-hybrid-applayout-bar-title {
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 0;
  top: 0; }

.oj-flex-items-pad > .oj-flex > .oj-flex-item,
.oj-flex.oj-flex-items-pad > .oj-flex-item {
  padding-left: 10px;
  padding-right: 10px; }

.oj-flex-items-pad > .oj-flex > .oj-flex-item > .oj-flex,
.oj-flex.oj-flex-items-pad > .oj-flex-item > .oj-flex {
  margin-left: -10px;
  margin-right: -10px; }

@media print, screen {
  .oj-sm-flex-items-1 > .oj-flex-item,
  .oj-sm-flex-1 {
    -webkit-flex: 1;
    flex: 1; }
  .oj-sm-flex-items-initial > .oj-flex-item,
  .oj-sm-flex-initial {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto; }
  .oj-sm-justify-content-flex-end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end; }
  .oj-sm-justify-content-center {
    -webkit-justify-content: center;
    justify-content: center; }
  .oj-sm-justify-content-space-between {
    -webkit-justify-content: space-between;
    justify-content: space-between; }
  .oj-sm-justify-content-space-around {
    -webkit-justify-content: space-around;
    justify-content: space-around; }
  .oj-sm-align-items-center, .oj-hybrid-applayout-header, .oj-hybrid-applayout-header-no-border {
    -webkit-align-items: center;
    align-items: center; }
  .oj-sm-align-items-baseline {
    -webkit-align-items: baseline;
    align-items: baseline; }
  .oj-sm-align-items-flex-start {
    -webkit-align-items: flex-start;
    align-items: flex-start; }
  .oj-sm-align-items-flex-end {
    -webkit-align-items: flex-end;
    align-items: flex-end; }
  .oj-sm-align-self-center {
    -webkit-align-self: center;
    align-self: center; }
  .oj-sm-align-self-flex-start {
    -webkit-align-self: flex-start;
    align-self: flex-start; }
  .oj-sm-align-self-flex-end {
    -webkit-align-self: flex-end;
    align-self: flex-end; }
  .oj-sm-flex-direction-column {
    -webkit-flex-direction: column;
    flex-direction: column; }
  .oj-sm-flex-wrap-nowrap {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap; } }

@media print, screen and (min-width: 768px) {
  .oj-md-flex-items-1 > .oj-flex-item,
  .oj-md-flex-1 {
    -webkit-flex: 1;
    flex: 1; }
  .oj-md-flex-items-initial > .oj-flex-item,
  .oj-md-flex-initial {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto; }
  .oj-md-order-0 {
    -webkit-order: 0;
    order: 0; }
  .oj-md-order-1 {
    -webkit-order: 1;
    order: 1; }
  .oj-md-order-2 {
    -webkit-order: 2;
    order: 2; }
  .oj-md-order-3 {
    -webkit-order: 3;
    order: 3; }
  .oj-md-order-4 {
    -webkit-order: 4;
    order: 4; }
  .oj-md-order-5 {
    -webkit-order: 5;
    order: 5; }
  .oj-md-justify-content-flex-end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end; }
  .oj-md-justify-content-center {
    -webkit-justify-content: center;
    justify-content: center; }
  .oj-md-justify-content-space-between {
    -webkit-justify-content: space-between;
    justify-content: space-between; }
  .oj-md-justify-content-space-around {
    -webkit-justify-content: space-around;
    justify-content: space-around; }
  .oj-md-align-items-center {
    -webkit-align-items: center;
    align-items: center; }
  .oj-md-align-items-baseline {
    -webkit-align-items: baseline;
    align-items: baseline; }
  .oj-md-align-items-flex-start {
    -webkit-align-items: flex-start;
    align-items: flex-start; }
  .oj-md-align-items-flex-end {
    -webkit-align-items: flex-end;
    align-items: flex-end; }
  .oj-md-align-self-center {
    -webkit-align-self: center;
    align-self: center; }
  .oj-md-align-self-flex-start {
    -webkit-align-self: flex-start;
    align-self: flex-start; }
  .oj-md-align-self-flex-end {
    -webkit-align-self: flex-end;
    align-self: flex-end; }
  .oj-md-flex-direction-column {
    -webkit-flex-direction: column;
    flex-direction: column; }
  .oj-md-flex-wrap-nowrap {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap; } }

@media print and (orientation: landscape), screen and (min-width: 1024px) {
  .oj-lg-flex-items-1 > .oj-flex-item,
  .oj-lg-flex-1 {
    -webkit-flex: 1;
    flex: 1; }
  .oj-lg-flex-items-initial > .oj-flex-item,
  .oj-lg-flex-initial {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto; }
  .oj-lg-order-0 {
    -webkit-order: 0;
    order: 0; }
  .oj-lg-order-1 {
    -webkit-order: 1;
    order: 1; }
  .oj-lg-order-2 {
    -webkit-order: 2;
    order: 2; }
  .oj-lg-order-3 {
    -webkit-order: 3;
    order: 3; }
  .oj-lg-order-4 {
    -webkit-order: 4;
    order: 4; }
  .oj-lg-order-5 {
    -webkit-order: 5;
    order: 5; }
  .oj-lg-justify-content-flex-end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end; }
  .oj-lg-justify-content-center {
    -webkit-justify-content: center;
    justify-content: center; }
  .oj-lg-justify-content-space-between {
    -webkit-justify-content: space-between;
    justify-content: space-between; }
  .oj-lg-justify-content-space-around {
    -webkit-justify-content: space-around;
    justify-content: space-around; }
  .oj-lg-align-items-center {
    -webkit-align-items: center;
    align-items: center; }
  .oj-lg-align-items-baseline {
    -webkit-align-items: baseline;
    align-items: baseline; }
  .oj-lg-align-items-flex-start {
    -webkit-align-items: flex-start;
    align-items: flex-start; }
  .oj-lg-align-items-flex-end {
    -webkit-align-items: flex-end;
    align-items: flex-end; }
  .oj-lg-align-self-center {
    -webkit-align-self: center;
    align-self: center; }
  .oj-lg-align-self-flex-start {
    -webkit-align-self: flex-start;
    align-self: flex-start; }
  .oj-lg-align-self-flex-end {
    -webkit-align-self: flex-end;
    align-self: flex-end; }
  .oj-lg-flex-direction-column {
    -webkit-flex-direction: column;
    flex-direction: column; }
  .oj-lg-flex-wrap-nowrap {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap; } }

@media screen and (min-width: 1281px) {
  .oj-xl-flex-items-1 > .oj-flex-item,
  .oj-xl-flex-1 {
    -webkit-flex: 1;
    flex: 1; }
  .oj-xl-flex-items-initial > .oj-flex-item,
  .oj-xl-flex-initial {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto; }
  .oj-xl-order-0 {
    -webkit-order: 0;
    order: 0; }
  .oj-xl-order-1 {
    -webkit-order: 1;
    order: 1; }
  .oj-xl-order-2 {
    -webkit-order: 2;
    order: 2; }
  .oj-xl-order-3 {
    -webkit-order: 3;
    order: 3; }
  .oj-xl-order-4 {
    -webkit-order: 4;
    order: 4; }
  .oj-xl-order-5 {
    -webkit-order: 5;
    order: 5; }
  .oj-xl-justify-content-flex-end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end; }
  .oj-xl-justify-content-center {
    -webkit-justify-content: center;
    justify-content: center; }
  .oj-xl-justify-content-space-between {
    -webkit-justify-content: space-between;
    justify-content: space-between; }
  .oj-xl-justify-content-space-around {
    -webkit-justify-content: space-around;
    justify-content: space-around; }
  .oj-xl-align-items-center {
    -webkit-align-items: center;
    align-items: center; }
  .oj-xl-align-items-baseline {
    -webkit-align-items: baseline;
    align-items: baseline; }
  .oj-xl-align-items-flex-start {
    -webkit-align-items: flex-start;
    align-items: flex-start; }
  .oj-xl-align-items-flex-end {
    -webkit-align-items: flex-end;
    align-items: flex-end; }
  .oj-xl-align-self-center {
    -webkit-align-self: center;
    align-self: center; }
  .oj-xl-align-self-flex-start {
    -webkit-align-self: flex-start;
    align-self: flex-start; }
  .oj-xl-align-self-flex-end {
    -webkit-align-self: flex-end;
    align-self: flex-end; }
  .oj-xl-flex-direction-column {
    -webkit-flex-direction: column;
    flex-direction: column; }
  .oj-xl-flex-wrap-nowrap {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap; } }

@media screen and (max-width: 767px) {
  .oj-sm-only-flex-items-1 > .oj-flex-item,
  .oj-sm-only-flex-1 {
    -webkit-flex: 1;
    flex: 1; }
  .oj-sm-only-flex-items-initial > .oj-flex-item,
  .oj-sm-only-flex-initial {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto; }
  .oj-sm-only-justify-content-flex-end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end; }
  .oj-sm-only-justify-content-center {
    -webkit-justify-content: center;
    justify-content: center; }
  .oj-sm-only-justify-content-space-between {
    -webkit-justify-content: space-between;
    justify-content: space-between; }
  .oj-sm-only-justify-content-space-around {
    -webkit-justify-content: space-around;
    justify-content: space-around; }
  .oj-sm-only-align-items-center {
    -webkit-align-items: center;
    align-items: center; }
  .oj-sm-only-align-items-baseline {
    -webkit-align-items: baseline;
    align-items: baseline; }
  .oj-sm-only-align-items-flex-start {
    -webkit-align-items: flex-start;
    align-items: flex-start; }
  .oj-sm-only-align-items-flex-end {
    -webkit-align-items: flex-end;
    align-items: flex-end; }
  .oj-sm-only-align-self-center {
    -webkit-align-self: center;
    align-self: center; }
  .oj-sm-only-align-self-flex-start {
    -webkit-align-self: flex-start;
    align-self: flex-start; }
  .oj-sm-only-align-self-flex-end {
    -webkit-align-self: flex-end;
    align-self: flex-end; }
  .oj-sm-only-flex-direction-column {
    -webkit-flex-direction: column;
    flex-direction: column; }
  .oj-sm-only-flex-wrap-nowrap {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap; } }

@media print and (orientation: portrait), screen and (min-width: 768px) and (max-width: 1023px) {
  .oj-md-only-flex-items-1 > .oj-flex-item,
  .oj-md-only-flex-1 {
    -webkit-flex: 1;
    flex: 1; }
  .oj-md-only-flex-items-initial > .oj-flex-item,
  .oj-md-only-flex-initial {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto; }
  .oj-md-only-justify-content-flex-end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end; }
  .oj-md-only-justify-content-center {
    -webkit-justify-content: center;
    justify-content: center; }
  .oj-md-only-justify-content-space-between {
    -webkit-justify-content: space-between;
    justify-content: space-between; }
  .oj-md-only-justify-content-space-around {
    -webkit-justify-content: space-around;
    justify-content: space-around; }
  .oj-md-only-align-items-center {
    -webkit-align-items: center;
    align-items: center; }
  .oj-md-only-align-items-baseline {
    -webkit-align-items: baseline;
    align-items: baseline; }
  .oj-md-only-align-items-flex-start {
    -webkit-align-items: flex-start;
    align-items: flex-start; }
  .oj-md-only-align-items-flex-end {
    -webkit-align-items: flex-end;
    align-items: flex-end; }
  .oj-md-only-align-self-center {
    -webkit-align-self: center;
    align-self: center; }
  .oj-md-only-align-self-flex-start {
    -webkit-align-self: flex-start;
    align-self: flex-start; }
  .oj-md-only-align-self-flex-end {
    -webkit-align-self: flex-end;
    align-self: flex-end; }
  .oj-md-only-flex-direction-column {
    -webkit-flex-direction: column;
    flex-direction: column; }
  .oj-md-only-flex-wrap-nowrap {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap; } }

@media print and (orientation: landscape), screen and (min-width: 1024px) and (max-width: 1280px) {
  .oj-lg-only-flex-items-1 > .oj-flex-item,
  .oj-lg-only-flex-1 {
    -webkit-flex: 1;
    flex: 1; }
  .oj-lg-only-flex-items-initial > .oj-flex-item,
  .oj-lg-only-flex-initial {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto; }
  .oj-lg-only-justify-content-flex-end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end; }
  .oj-lg-only-justify-content-center {
    -webkit-justify-content: center;
    justify-content: center; }
  .oj-lg-only-justify-content-space-between {
    -webkit-justify-content: space-between;
    justify-content: space-between; }
  .oj-lg-only-justify-content-space-around {
    -webkit-justify-content: space-around;
    justify-content: space-around; }
  .oj-lg-only-align-items-center {
    -webkit-align-items: center;
    align-items: center; }
  .oj-lg-only-align-items-baseline {
    -webkit-align-items: baseline;
    align-items: baseline; }
  .oj-lg-only-align-items-flex-start {
    -webkit-align-items: flex-start;
    align-items: flex-start; }
  .oj-lg-only-align-items-flex-end {
    -webkit-align-items: flex-end;
    align-items: flex-end; }
  .oj-lg-only-align-self-center {
    -webkit-align-self: center;
    align-self: center; }
  .oj-lg-only-align-self-flex-start {
    -webkit-align-self: flex-start;
    align-self: flex-start; }
  .oj-lg-only-align-self-flex-end {
    -webkit-align-self: flex-end;
    align-self: flex-end; }
  .oj-lg-only-flex-direction-column {
    -webkit-flex-direction: column;
    flex-direction: column; }
  .oj-lg-only-flex-wrap-nowrap {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap; } }

@media print, screen {
  .oj-sm-1 {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-sm-2 {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-sm-3 {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-sm-4 {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-sm-5 {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; }
  .oj-sm-6 {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-sm-7 {
    -webkit-flex: 0 1 58.3333333333%;
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%; }
  .oj-sm-8 {
    -webkit-flex: 0 1 66.6666666667%;
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%; }
  .oj-sm-9 {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-sm-10 {
    -webkit-flex: 0 1 83.3333333333%;
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%; }
  .oj-sm-11 {
    -webkit-flex: 0 1 91.6666666667%;
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%; }
  .oj-sm-12 {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-sm-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-sm-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 91.6666666667%;
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%; }
  .oj-sm-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-sm-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 83.3333333333%;
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%; }
  .oj-sm-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-sm-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-sm-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-sm-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 66.6666666667%;
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%; }
  .oj-sm-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; }
  .oj-sm-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 58.3333333333%;
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%; }
  .oj-sm-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-sm-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-sm-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 58.3333333333%;
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%; }
  .oj-sm-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; }
  .oj-sm-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 66.6666666667%;
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%; }
  .oj-sm-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-sm-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-sm-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-sm-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 83.3333333333%;
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%; }
  .oj-sm-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-sm-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 91.6666666667%;
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%; }
  .oj-sm-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-sm-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-sm-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-sm-even-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-sm-even-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-sm-even-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-sm-even-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-sm-even-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; } }

@media print, screen and (min-width: 768px) {
  .oj-md-1 {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-md-2 {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-md-3 {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-md-4 {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-md-5 {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; }
  .oj-md-6 {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-md-7 {
    -webkit-flex: 0 1 58.3333333333%;
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%; }
  .oj-md-8 {
    -webkit-flex: 0 1 66.6666666667%;
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%; }
  .oj-md-9 {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-md-10 {
    -webkit-flex: 0 1 83.3333333333%;
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%; }
  .oj-md-11 {
    -webkit-flex: 0 1 91.6666666667%;
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%; }
  .oj-md-12 {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-md-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-md-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 91.6666666667%;
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%; }
  .oj-md-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-md-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 83.3333333333%;
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%; }
  .oj-md-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-md-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-md-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-md-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 66.6666666667%;
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%; }
  .oj-md-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; }
  .oj-md-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 58.3333333333%;
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%; }
  .oj-md-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-md-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-md-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 58.3333333333%;
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%; }
  .oj-md-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; }
  .oj-md-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 66.6666666667%;
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%; }
  .oj-md-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-md-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-md-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-md-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 83.3333333333%;
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%; }
  .oj-md-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-md-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 91.6666666667%;
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%; }
  .oj-md-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-md-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-md-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-md-even-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-md-even-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-md-even-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-md-even-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-md-even-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; } }

@media print and (orientation: landscape), screen and (min-width: 1024px) {
  .oj-lg-1 {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-lg-2 {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-lg-3 {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-lg-4 {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-lg-5 {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; }
  .oj-lg-6 {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-lg-7 {
    -webkit-flex: 0 1 58.3333333333%;
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%; }
  .oj-lg-8 {
    -webkit-flex: 0 1 66.6666666667%;
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%; }
  .oj-lg-9 {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-lg-10 {
    -webkit-flex: 0 1 83.3333333333%;
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%; }
  .oj-lg-11 {
    -webkit-flex: 0 1 91.6666666667%;
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%; }
  .oj-lg-12 {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-lg-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-lg-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 91.6666666667%;
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%; }
  .oj-lg-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-lg-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 83.3333333333%;
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%; }
  .oj-lg-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-lg-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-lg-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-lg-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 66.6666666667%;
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%; }
  .oj-lg-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; }
  .oj-lg-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 58.3333333333%;
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%; }
  .oj-lg-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-lg-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-lg-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 58.3333333333%;
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%; }
  .oj-lg-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; }
  .oj-lg-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 66.6666666667%;
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%; }
  .oj-lg-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-lg-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-lg-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-lg-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 83.3333333333%;
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%; }
  .oj-lg-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-lg-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 91.6666666667%;
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%; }
  .oj-lg-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-lg-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-lg-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-lg-even-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-lg-even-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-lg-even-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-lg-even-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-lg-even-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; } }

@media screen and (min-width: 1281px) {
  .oj-xl-1 {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-xl-2 {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-xl-3 {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-xl-4 {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-xl-5 {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; }
  .oj-xl-6 {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-xl-7 {
    -webkit-flex: 0 1 58.3333333333%;
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%; }
  .oj-xl-8 {
    -webkit-flex: 0 1 66.6666666667%;
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%; }
  .oj-xl-9 {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-xl-10 {
    -webkit-flex: 0 1 83.3333333333%;
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%; }
  .oj-xl-11 {
    -webkit-flex: 0 1 91.6666666667%;
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%; }
  .oj-xl-12 {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-xl-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-xl-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 91.6666666667%;
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%; }
  .oj-xl-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-xl-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 83.3333333333%;
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%; }
  .oj-xl-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-xl-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-xl-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-xl-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 66.6666666667%;
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%; }
  .oj-xl-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; }
  .oj-xl-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 58.3333333333%;
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%; }
  .oj-xl-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-xl-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-xl-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 58.3333333333%;
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%; }
  .oj-xl-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; }
  .oj-xl-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 66.6666666667%;
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%; }
  .oj-xl-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-xl-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-xl-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-xl-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 83.3333333333%;
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%; }
  .oj-xl-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-xl-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 91.6666666667%;
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%; }
  .oj-xl-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-xl-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-xl-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-xl-even-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-xl-even-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-xl-even-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-xl-even-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-xl-even-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; } }

@media print, screen {
  .oj-sm-hide {
    display: none; }
  .oj-sm-text-align-end {
    text-align: right; }
    html[dir="rtl"] .oj-sm-text-align-end {
      text-align: left; }
  .oj-sm-float-end {
    float: right; }
    html[dir="rtl"] .oj-sm-float-end {
      float: left; }
  .oj-sm-float-start {
    float: left; }
    html[dir="rtl"] .oj-sm-float-start {
      float: right; } }

@media print, screen and (min-width: 768px) {
  .oj-md-hide {
    display: none; }
  .oj-md-text-align-end {
    text-align: right; }
    html[dir="rtl"] .oj-md-text-align-end {
      text-align: left; }
  .oj-md-float-end {
    float: right; }
    html[dir="rtl"] .oj-md-float-end {
      float: left; }
  .oj-md-float-start {
    float: left; }
    html[dir="rtl"] .oj-md-float-start {
      float: right; } }

@media print and (orientation: landscape), screen and (min-width: 1024px) {
  .oj-lg-hide {
    display: none; }
  .oj-lg-text-align-end {
    text-align: right; }
    html[dir="rtl"] .oj-lg-text-align-end {
      text-align: left; }
  .oj-lg-float-end {
    float: right; }
    html[dir="rtl"] .oj-lg-float-end {
      float: left; }
  .oj-lg-float-start {
    float: left; }
    html[dir="rtl"] .oj-lg-float-start {
      float: right; } }

@media screen and (min-width: 1281px) {
  .oj-xl-hide {
    display: none; }
  .oj-xl-text-align-end {
    text-align: right; }
    html[dir="rtl"] .oj-xl-text-align-end {
      text-align: left; }
  .oj-xl-float-end {
    float: right; }
    html[dir="rtl"] .oj-xl-float-end {
      float: left; }
  .oj-xl-float-start {
    float: left; }
    html[dir="rtl"] .oj-xl-float-start {
      float: right; } }

@media print and (orientation: portrait), screen and (max-width: 1023px) {
  .oj-md-down-hide {
    display: none; }
  .oj-md-down-text-align-end {
    text-align: right; }
    html[dir="rtl"] .oj-md-down-text-align-end {
      text-align: left; }
  .oj-md-down-float-end {
    float: right; }
    html[dir="rtl"] .oj-md-down-float-end {
      float: left; }
  .oj-md-down-float-start {
    float: left; }
    html[dir="rtl"] .oj-md-down-float-start {
      float: right; } }

@media print and (orientation: landscape), screen and (max-width: 1280px) {
  .oj-lg-down-hide {
    display: none; }
  .oj-lg-down-text-align-end {
    text-align: right; }
    html[dir="rtl"] .oj-lg-down-text-align-end {
      text-align: left; }
  .oj-lg-down-float-end {
    float: right; }
    html[dir="rtl"] .oj-lg-down-float-end {
      float: left; }
  .oj-lg-down-float-start {
    float: left; }
    html[dir="rtl"] .oj-lg-down-float-start {
      float: right; } }

@media screen and (max-width: 767px) {
  /* small only screen layout helpers */
  .oj-sm-only-hide {
    display: none; }
  .oj-sm-only-text-align-end {
    text-align: right; }
    html[dir="rtl"] .oj-sm-only-text-align-end {
      text-align: left; }
  .oj-sm-only-float-end {
    float: right; }
    html[dir="rtl"] .oj-sm-only-float-end {
      float: left; }
  .oj-sm-only-float-start {
    float: left; }
    html[dir="rtl"] .oj-sm-only-float-start {
      float: right; } }

@media print and (orientation: portrait), screen and (min-width: 768px) and (max-width: 1023px) {
  /* medium only screen layout helpers */
  .oj-md-only-hide {
    display: none; }
  .oj-md-only-text-align-end {
    text-align: right; }
    html[dir="rtl"] .oj-md-only-text-align-end {
      text-align: left; }
  .oj-md-only-float-end {
    float: right; }
    html[dir="rtl"] .oj-md-only-float-end {
      float: left; }
  .oj-md-only-float-start {
    float: left; }
    html[dir="rtl"] .oj-md-only-float-start {
      float: right; } }

@media print and (orientation: landscape), screen and (min-width: 1024px) and (max-width: 1280px) {
  /* large only screen layout helpers */
  .oj-lg-only-hide {
    display: none; }
  .oj-lg-only-text-align-end {
    text-align: right; }
    html[dir="rtl"] .oj-lg-only-text-align-end {
      text-align: left; }
  .oj-lg-only-float-end {
    float: right; }
    html[dir="rtl"] .oj-lg-only-float-end {
      float: left; }
  .oj-lg-only-float-start {
    float: left; }
    html[dir="rtl"] .oj-lg-only-float-start {
      float: right; } }

/**
     * This idea/code is from zurb foundation, thanks zurb!
     *
     * In the jet sass files there are variables for
     * responsive screen sizes, these look something like
     *    $screenSmallRange:  0, 767px !default;
     *    $screenMediumRange: 768px, 1023px !default;
     *    $screenLargeRange:  1024px, 1280px !default;
     *    $screenXlargeRange: 1281px, null !default;
     *
     * These variables in turn are used to generate responsive media queries in variables like
     * $responsiveQuerySmallUp, $responsiveQueryMediumUp, etc.
     *
     * we send down these media queries as the font family in classes
     * that look something like this:
     *
     * .oj-mq-md {
     *    font-family: "/screen and (min-width: 768px)/";
     * }
     *
     * This function applies the class and then reads the font family off a dom
     * element to get the media query string
     *
     * example usage:
     *   var md_media_query = oj.ResponsiveUtils._getMediaQueryFromClass('oj-mq-md');
     */
.oj-mq-sm-up {
  font-family: "/print, screen/"; }

.oj-mq-md-up {
  font-family: "/print, screen and (min-width: 768px)/"; }

.oj-mq-lg-up {
  font-family: "/print and (orientation: landscape), screen and (min-width: 1024px)/"; }

.oj-mq-xl-up {
  font-family: "/screen and (min-width: 1281px)/"; }

.oj-mq-xxl-up {
  font-family: "/null/"; }

.oj-mq-sm-only {
  font-family: "/screen and (max-width: 767px)/"; }

.oj-mq-md-only {
  font-family: "/print and (orientation: portrait), screen and (min-width: 768px) and (max-width: 1023px)/"; }

.oj-mq-lg-only {
  font-family: "/print and (orientation: landscape), screen and (min-width: 1024px) and (max-width: 1280px)/"; }

.oj-mq-xl-only {
  font-family: "/null/"; }

.oj-mq-md-down {
  font-family: "/print and (orientation: portrait), screen and (max-width: 1023px)/"; }

.oj-mq-lg-down {
  font-family: "/print and (orientation: landscape), screen and (max-width: 1280px)/"; }

.oj-mq-xl-down {
  font-family: "/null/"; }

.oj-mq-high-resolution {
  font-family: "/(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx)/"; }

.oj-form-cols-labels-inline {
  -webkit-column-width: 22rem;
  -moz-column-width: 22rem;
  column-width: 22rem; }

.oj-form-cols {
  -webkit-column-width: 18.45rem;
  -moz-column-width: 18.45rem;
  column-width: 18.45rem; }

.oj-form-cols-max2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2; }

.oj-form-cols > .oj-flex,
.oj-form-cols-labels-inline > .oj-flex {
  -moz-column-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -ms-column-break-inside: avoid;
  break-inside: avoid;
  page-break-inside: avoid; }

.oj-form > hr,
.oj-form > h1,
.oj-form > h2,
.oj-form > h3,
.oj-form > h4 {
  margin: 5px 0 15px 0; }

.oj-form > .oj-form-control,
.oj-form > .oj-form-non-control {
  margin-bottom: 10px; }

.oj-form > .oj-form-control-group {
  margin-bottom: 6px; }

.oj-form-control-group .oj-form-control {
  vertical-align: top; }

.oj-form > .oj-flex > .oj-flex-item > .oj-form {
  text-align: left; }
  html[dir="rtl"] .oj-form > .oj-flex > .oj-flex-item > .oj-form {
    text-align: right; }

.oj-form > .oj-flex > .oj-flex-item:nth-child(even),
.oj-form > .oj-flex > .oj-flex-item:last-child {
  margin: 0 0 6px 0; }

.oj-form > .oj-flex > .oj-flex-item > .oj-form-non-control {
  margin-bottom: 4px; }

.oj-form-layout {
  border-color: #e7e7e9;
  border-style: solid;
  border-width: 1px 0 0; }

.oj-form-layout-inset {
  margin: 12px;
  border-width: 1px; }

.oj-form > .oj-flex {
  border-style: solid;
  border-color: #d5dfe5;
  border-width: 0 0 1px 0;
  padding: 10px 0 0; }

.oj-form > .oj-flex:last-child {
  border-width: 0; }

.oj-form-layout > .oj-form[class*="oj-form-cols-"] > .oj-flex:last-child {
  border-width: 0 0 1px 0; }

.oj-form-no-dividers > .oj-flex,
.oj-form-layout > .oj-form-no-dividers[class*="oj-form-cols-"] > .oj-flex:last-child,
.oj-form-layout > .oj-flex-item > .oj-form-no-dividers > .oj-flex:last-child {
  border-width: 0; }

@media print, screen {
  html:not([dir="rtl"]) .oj-form-layout:not(.oj-sm-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-left: 0.625rem; }
  html[dir="rtl"] .oj-form-layout:not(.oj-sm-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-right: 0.625rem; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-sm-label-nowrap,
  .oj-sm-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label,
  .oj-sm-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-sm-label-inline,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis; }
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(even) {
    text-align: right; }
    html[dir="rtl"] .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(even) {
      text-align: left; }
  html:not([dir="rtl"]) .oj-sm-form-across > .oj-flex > .oj-flex-item:nth-child(2n+3) {
    padding-left: 0.625rem; }
  html[dir="rtl"] .oj-sm-form-across > .oj-flex > .oj-flex-item:nth-child(2n+3) {
    padding-right: 0.625rem; }
  html:not([dir="rtl"]) .oj-sm-form-across > .oj-flex > .oj-flex-item:nth-child(even) {
    padding-right: 0.625rem; }
  html[dir="rtl"] .oj-sm-form-across > .oj-flex > .oj-flex-item:nth-child(even) {
    padding-left: 0.625rem; }
  .oj-sm-label-inline .oj-label-required-icon,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon {
    margin-top: 1px; }
  .oj-sm-label-inline .oj-label-required-icon,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-sm-label-inline .oj-label-help-icon,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  .oj-sm-label-inline.oj-label label,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) label {
    float: none; }
  html:not([dir="rtl"]) .oj-sm-label-inline.oj-label label {
    float: none; }
  html[dir="rtl"] .oj-sm-label-inline.oj-label label {
    float: none; }
  html:not([dir="rtl"]) .oj-sm-label-inline .oj-label-required-icon, html:not([dir="rtl"])
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon, html:not([dir="rtl"])
  .oj-sm-label-inline .oj-label-help-icon, html:not([dir="rtl"])
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-left: 0;
    margin-right: 6px; }
  html[dir="rtl"] .oj-sm-label-inline .oj-label-required-icon, html[dir="rtl"]
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon, html[dir="rtl"]
  .oj-sm-label-inline .oj-label-help-icon, html[dir="rtl"]
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-right: 0;
    margin-left: 6px; }
  .oj-sm-label-inline .oj-label-help-icon-anchor,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon-anchor {
    float: none; }
  .oj-sm-label-inline.oj-label,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
    display: inline-block;
    vertical-align: top;
    margin-top: 0.2em;
    box-sizing: border-box; }
    html:not([dir="rtl"]) .oj-sm-label-inline.oj-label, html:not([dir="rtl"])
    .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label, html:not([dir="rtl"])
    .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
      padding-right: 0.625rem; }
    html[dir="rtl"] .oj-sm-label-inline.oj-label, html[dir="rtl"]
    .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label, html[dir="rtl"]
    .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
      padding-left: 0.625rem; }
  .oj-sm-label-inline.oj-label-inline-top,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label-inline-top,
  .oj-sm-label-inline.oj-label-nocomp.oj-label-for-non-control,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp.oj-label-for-non-control {
    margin-top: 0; }
  .oj-sm-label-inline.oj-radioset-label,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-radioset-label,
  .oj-sm-label-inline.oj-checkboxset-label,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-checkboxset-label {
    margin-top: .6rem;
    margin-bottom: 0; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-sm-label-nowrap .oj-label-group,
  .oj-sm-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-sm-label-inline .oj-label-group,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit;
    line-height: 1.6em; }
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) >
.oj-label-nocomp:not(.oj-label-for-non-control) {
    line-height: 1.6em; } }

@media print, screen and (min-width: 768px) {
  html:not([dir="rtl"]) .oj-form-layout:not(.oj-md-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-left: 0.625rem; }
  html[dir="rtl"] .oj-form-layout:not(.oj-md-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-right: 0.625rem; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-md-label-nowrap,
  .oj-md-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label,
  .oj-md-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-md-label-inline,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis; }
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(even) {
    text-align: right; }
    html[dir="rtl"] .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(even) {
      text-align: left; }
  html:not([dir="rtl"]) .oj-md-form-across > .oj-flex > .oj-flex-item:nth-child(2n+3) {
    padding-left: 0.625rem; }
  html[dir="rtl"] .oj-md-form-across > .oj-flex > .oj-flex-item:nth-child(2n+3) {
    padding-right: 0.625rem; }
  html:not([dir="rtl"]) .oj-md-form-across > .oj-flex > .oj-flex-item:nth-child(even) {
    padding-right: 0.625rem; }
  html[dir="rtl"] .oj-md-form-across > .oj-flex > .oj-flex-item:nth-child(even) {
    padding-left: 0.625rem; }
  .oj-md-label-inline .oj-label-required-icon,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon {
    margin-top: 1px; }
  .oj-md-label-inline .oj-label-required-icon,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-md-label-inline .oj-label-help-icon,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  .oj-md-label-inline.oj-label label,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) label {
    float: none; }
  html:not([dir="rtl"]) .oj-md-label-inline.oj-label label {
    float: none; }
  html[dir="rtl"] .oj-md-label-inline.oj-label label {
    float: none; }
  html:not([dir="rtl"]) .oj-md-label-inline .oj-label-required-icon, html:not([dir="rtl"])
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon, html:not([dir="rtl"])
  .oj-md-label-inline .oj-label-help-icon, html:not([dir="rtl"])
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-left: 0;
    margin-right: 6px; }
  html[dir="rtl"] .oj-md-label-inline .oj-label-required-icon, html[dir="rtl"]
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon, html[dir="rtl"]
  .oj-md-label-inline .oj-label-help-icon, html[dir="rtl"]
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-right: 0;
    margin-left: 6px; }
  .oj-md-label-inline .oj-label-help-icon-anchor,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon-anchor {
    float: none; }
  .oj-md-label-inline.oj-label,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
    display: inline-block;
    vertical-align: top;
    margin-top: 0.2em;
    box-sizing: border-box; }
    html:not([dir="rtl"]) .oj-md-label-inline.oj-label, html:not([dir="rtl"])
    .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label, html:not([dir="rtl"])
    .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
      padding-right: 0.625rem; }
    html[dir="rtl"] .oj-md-label-inline.oj-label, html[dir="rtl"]
    .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label, html[dir="rtl"]
    .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
      padding-left: 0.625rem; }
  .oj-md-label-inline.oj-label-inline-top,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label-inline-top,
  .oj-md-label-inline.oj-label-nocomp.oj-label-for-non-control,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp.oj-label-for-non-control {
    margin-top: 0; }
  .oj-md-label-inline.oj-radioset-label,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-radioset-label,
  .oj-md-label-inline.oj-checkboxset-label,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-checkboxset-label {
    margin-top: .6rem;
    margin-bottom: 0; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-md-label-nowrap .oj-label-group,
  .oj-md-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-md-label-inline .oj-label-group,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit;
    line-height: 1.6em; }
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) >
.oj-label-nocomp:not(.oj-label-for-non-control) {
    line-height: 1.6em; } }

@media print and (orientation: landscape), screen and (min-width: 1024px) {
  html:not([dir="rtl"]) .oj-form-layout:not(.oj-lg-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-left: 0.625rem; }
  html[dir="rtl"] .oj-form-layout:not(.oj-lg-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-right: 0.625rem; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-lg-label-nowrap,
  .oj-lg-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label,
  .oj-lg-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-lg-label-inline,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis; }
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(even) {
    text-align: right; }
    html[dir="rtl"] .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(even) {
      text-align: left; }
  html:not([dir="rtl"]) .oj-lg-form-across > .oj-flex > .oj-flex-item:nth-child(2n+3) {
    padding-left: 0.625rem; }
  html[dir="rtl"] .oj-lg-form-across > .oj-flex > .oj-flex-item:nth-child(2n+3) {
    padding-right: 0.625rem; }
  html:not([dir="rtl"]) .oj-lg-form-across > .oj-flex > .oj-flex-item:nth-child(even) {
    padding-right: 0.625rem; }
  html[dir="rtl"] .oj-lg-form-across > .oj-flex > .oj-flex-item:nth-child(even) {
    padding-left: 0.625rem; }
  .oj-lg-label-inline .oj-label-required-icon,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon {
    margin-top: 1px; }
  .oj-lg-label-inline .oj-label-required-icon,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-lg-label-inline .oj-label-help-icon,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  .oj-lg-label-inline.oj-label label,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) label {
    float: none; }
  html:not([dir="rtl"]) .oj-lg-label-inline.oj-label label {
    float: none; }
  html[dir="rtl"] .oj-lg-label-inline.oj-label label {
    float: none; }
  html:not([dir="rtl"]) .oj-lg-label-inline .oj-label-required-icon, html:not([dir="rtl"])
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon, html:not([dir="rtl"])
  .oj-lg-label-inline .oj-label-help-icon, html:not([dir="rtl"])
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-left: 0;
    margin-right: 6px; }
  html[dir="rtl"] .oj-lg-label-inline .oj-label-required-icon, html[dir="rtl"]
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon, html[dir="rtl"]
  .oj-lg-label-inline .oj-label-help-icon, html[dir="rtl"]
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-right: 0;
    margin-left: 6px; }
  .oj-lg-label-inline .oj-label-help-icon-anchor,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon-anchor {
    float: none; }
  .oj-lg-label-inline.oj-label,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
    display: inline-block;
    vertical-align: top;
    margin-top: 0.2em;
    box-sizing: border-box; }
    html:not([dir="rtl"]) .oj-lg-label-inline.oj-label, html:not([dir="rtl"])
    .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label, html:not([dir="rtl"])
    .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
      padding-right: 0.625rem; }
    html[dir="rtl"] .oj-lg-label-inline.oj-label, html[dir="rtl"]
    .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label, html[dir="rtl"]
    .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
      padding-left: 0.625rem; }
  .oj-lg-label-inline.oj-label-inline-top,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label-inline-top,
  .oj-lg-label-inline.oj-label-nocomp.oj-label-for-non-control,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp.oj-label-for-non-control {
    margin-top: 0; }
  .oj-lg-label-inline.oj-radioset-label,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-radioset-label,
  .oj-lg-label-inline.oj-checkboxset-label,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-checkboxset-label {
    margin-top: .6rem;
    margin-bottom: 0; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-lg-label-nowrap .oj-label-group,
  .oj-lg-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-lg-label-inline .oj-label-group,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit;
    line-height: 1.6em; }
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) >
.oj-label-nocomp:not(.oj-label-for-non-control) {
    line-height: 1.6em; } }

@media screen and (min-width: 1281px) {
  html:not([dir="rtl"]) .oj-form-layout:not(.oj-xl-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-left: 0.625rem; }
  html[dir="rtl"] .oj-form-layout:not(.oj-xl-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-right: 0.625rem; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-xl-label-nowrap,
  .oj-xl-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label,
  .oj-xl-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-xl-label-inline,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis; }
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(even) {
    text-align: right; }
    html[dir="rtl"] .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(even) {
      text-align: left; }
  html:not([dir="rtl"]) .oj-xl-form-across > .oj-flex > .oj-flex-item:nth-child(2n+3) {
    padding-left: 0.625rem; }
  html[dir="rtl"] .oj-xl-form-across > .oj-flex > .oj-flex-item:nth-child(2n+3) {
    padding-right: 0.625rem; }
  html:not([dir="rtl"]) .oj-xl-form-across > .oj-flex > .oj-flex-item:nth-child(even) {
    padding-right: 0.625rem; }
  html[dir="rtl"] .oj-xl-form-across > .oj-flex > .oj-flex-item:nth-child(even) {
    padding-left: 0.625rem; }
  .oj-xl-label-inline .oj-label-required-icon,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon {
    margin-top: 1px; }
  .oj-xl-label-inline .oj-label-required-icon,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-xl-label-inline .oj-label-help-icon,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  .oj-xl-label-inline.oj-label label,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) label {
    float: none; }
  html:not([dir="rtl"]) .oj-xl-label-inline.oj-label label {
    float: none; }
  html[dir="rtl"] .oj-xl-label-inline.oj-label label {
    float: none; }
  html:not([dir="rtl"]) .oj-xl-label-inline .oj-label-required-icon, html:not([dir="rtl"])
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon, html:not([dir="rtl"])
  .oj-xl-label-inline .oj-label-help-icon, html:not([dir="rtl"])
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-left: 0;
    margin-right: 6px; }
  html[dir="rtl"] .oj-xl-label-inline .oj-label-required-icon, html[dir="rtl"]
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon, html[dir="rtl"]
  .oj-xl-label-inline .oj-label-help-icon, html[dir="rtl"]
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-right: 0;
    margin-left: 6px; }
  .oj-xl-label-inline .oj-label-help-icon-anchor,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon-anchor {
    float: none; }
  .oj-xl-label-inline.oj-label,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
    display: inline-block;
    vertical-align: top;
    margin-top: 0.2em;
    box-sizing: border-box; }
    html:not([dir="rtl"]) .oj-xl-label-inline.oj-label, html:not([dir="rtl"])
    .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label, html:not([dir="rtl"])
    .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
      padding-right: 0.625rem; }
    html[dir="rtl"] .oj-xl-label-inline.oj-label, html[dir="rtl"]
    .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label, html[dir="rtl"]
    .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
      padding-left: 0.625rem; }
  .oj-xl-label-inline.oj-label-inline-top,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label-inline-top,
  .oj-xl-label-inline.oj-label-nocomp.oj-label-for-non-control,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp.oj-label-for-non-control {
    margin-top: 0; }
  .oj-xl-label-inline.oj-radioset-label,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-radioset-label,
  .oj-xl-label-inline.oj-checkboxset-label,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-checkboxset-label {
    margin-top: .6rem;
    margin-bottom: 0; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-xl-label-nowrap .oj-label-group,
  .oj-xl-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-xl-label-inline .oj-label-group,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit;
    line-height: 1.6em; }
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) >
.oj-label-nocomp:not(.oj-label-for-non-control) {
    line-height: 1.6em; } }

@media screen and (max-width: 767px) {
  .oj-form-layout.oj-sm-only-flex-direction-column > .oj-flex-item:not(:last-child) > .oj-form > .oj-flex:last-child {
    border-width: 0 0 1px 0; } }

@media print and (orientation: portrait), screen and (min-width: 768px) and (max-width: 1023px) {
  .oj-form-layout.oj-md-only-flex-direction-column > .oj-flex-item:not(:last-child) > .oj-form > .oj-flex:last-child {
    border-width: 0 0 1px 0; } }

@media print and (orientation: landscape), screen and (min-width: 1024px) and (max-width: 1280px) {
  .oj-form-layout.oj-lg-only-flex-direction-column > .oj-flex-item:not(:last-child) > .oj-form > .oj-flex:last-child {
    border-width: 0 0 1px 0; } }

html:not([dir="rtl"]) .oj-form {
  padding-left: 0.625rem; }

html[dir="rtl"] .oj-form {
  padding-right: 0.625rem; }

html:not([dir="rtl"]) .oj-form > .oj-flex {
  padding-right: 0.625rem; }

html[dir="rtl"] .oj-form > .oj-flex {
  padding-left: 0.625rem; }

.oj-applayout-fixed-top, .oj-hybrid-applayout-navbar-fixed-top,
.oj-applayout-fixed-bottom,
.oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid-applayout-navbar {
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  z-index: 100; }

.oj-applayout-fixed-top, .oj-hybrid-applayout-navbar-fixed-top {
  top: 0; }

.oj-applayout-fixed-bottom, .oj-hybrid-applayout-navbar-fixed-bottom, .oj-hybrid-applayout-navbar {
  bottom: 0; }

/* Class used to suppress copy/paste and context menus for hybrid mobile apps */
.oj-hybrid {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; }

.oj-hybrid input,
.oj-hybrid textarea {
  -ms-user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text; }

.oj-hybrid-padding {
  padding: 0.625rem; }

.oj-hybrid-padding-vertical {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem; }

.oj-hybrid-padding-horizontal, .oj-hybrid-applayout-navbar-page, .oj-hybrid-applayout-navbar-fixed-top {
  padding-left: 0.625rem;
  padding-right: 0.625rem; }

.oj-hybrid-padding-top {
  padding-top: 0.625rem; }

.oj-hybrid-padding-bottom {
  padding-bottom: 0.625rem; }

html:not([dir="rtl"]) .oj-hybrid-padding-start {
  padding-left: 0.625rem; }

html[dir="rtl"] .oj-hybrid-padding-start {
  padding-right: 0.625rem; }

html:not([dir="rtl"]) .oj-hybrid-padding-end, html:not([dir="rtl"]) .oj-hybrid-applayout-header > .oj-flex-bar-start, html:not([dir="rtl"]) .oj-hybrid-applayout-header-no-border > .oj-flex-bar-start {
  padding-right: 0.625rem; }

html[dir="rtl"] .oj-hybrid-padding-end, html[dir="rtl"] .oj-hybrid-applayout-header > .oj-flex-bar-start, html[dir="rtl"] .oj-hybrid-applayout-header-no-border > .oj-flex-bar-start {
  padding-left: 0.625rem; }

.oj-hybrid-applayout-offcanvas {
  width: 90%;
  max-width: 320px;
  box-sizing: border-box;
  background-color: #313334;
  color: #ffffff;
  box-shadow: 3px 2px 7px rgba(0, 0, 0, 0.5); }

.oj-hybrid-applayout-page {
  min-height: 100vh; }

.oj-hybrid-applayout-header, .oj-hybrid-applayout-header-no-border {
  box-shadow: none;
  border-bottom: 1px solid #d5dfe5;
  background-color: #f6f6f7;
  padding: 0 0.625rem 0 0.625rem; }

.oj-hybrid-applayout-header::before, .oj-hybrid-applayout-header-no-border::before {
  content: "";
  display: inline-block;
  min-height: 44px;
  visibility: hidden; }

.oj-hybrid-applayout-header-title {
  font-weight: normal;
  font-size: 1.125rem;
  color: #000;
  padding: 0;
  margin: 0; }

/* Use instead of oj-hybrid-applayout-header when a top fixed bar is present
       so we can correctly style the header border */
.oj-hybrid-applayout-header-no-border {
  box-shadow: none;
  border-style: none; }

.oj-hybrid-applayout-header .oj-button, .oj-hybrid-applayout-header-no-border .oj-button {
  margin-bottom: 0; }

html:not([dir="rtl"]) .oj-hybrid-applayout-header .oj-flex-bar-start .oj-button:first-child, html:not([dir="rtl"]) .oj-hybrid-applayout-header-no-border .oj-flex-bar-start .oj-button:first-child {
  margin-left: -0.625rem; }

html[dir="rtl"] .oj-hybrid-applayout-header .oj-flex-bar-start .oj-button:first-child, html[dir="rtl"] .oj-hybrid-applayout-header-no-border .oj-flex-bar-start .oj-button:first-child {
  margin-right: -0.625rem; }

html:not([dir="rtl"]) .oj-hybrid-applayout-header .oj-flex-bar-end .oj-button:last-child, html:not([dir="rtl"]) .oj-hybrid-applayout-header-no-border .oj-flex-bar-end .oj-button:last-child {
  margin-right: -0.625rem; }

html[dir="rtl"] .oj-hybrid-applayout-header .oj-flex-bar-end .oj-button:last-child, html[dir="rtl"] .oj-hybrid-applayout-header-no-border .oj-flex-bar-end .oj-button:last-child {
  margin-left: -0.625rem; }

/* Class used to position the application header and title for iOS hybrid
       applications where the status bar is overlaid in the WebView.
       This class has no effect on other platforms. */
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-header, .oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-header-no-border {
  padding-top: 20px;
  min-height: 64px; }

.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-header .oj-hybrid-applayout-header-title, .oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-header-no-border .oj-hybrid-applayout-header-title {
  margin-top: 20px; }

.oj-hybrid-applayout-footer {
  min-height: 48px;
  border-top: 1px solid #d5dfe5;
  background-color: #f6f6f7; }

.oj-hybrid-applayout-toolbar-stretch .oj-button {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 48px;
  box-sizing: border-box;
  margin: 0; }

.oj-hybrid-applayout-navbar-page, .oj-hybrid-applayout-navbar-fixed-top,
.oj-hybrid-applayout-navbar-app,
.oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid-applayout-navbar {
  background-color: #f6f6f7; }

.oj-applayout-fixed-top .oj-hybrid-applayout-navbar-page, .oj-hybrid-applayout-navbar-fixed-top .oj-hybrid-applayout-navbar-page, .oj-applayout-fixed-top .oj-hybrid-applayout-navbar-fixed-top, .oj-hybrid-applayout-navbar-fixed-top .oj-hybrid-applayout-navbar-fixed-top,
.oj-applayout-fixed-top .oj-hybrid-applayout-navbar-app, .oj-hybrid-applayout-navbar-fixed-top .oj-hybrid-applayout-navbar-app,
.oj-applayout-fixed-top .oj-hybrid-applayout-navbar-fixed-bottom, .oj-hybrid-applayout-navbar-fixed-top .oj-hybrid-applayout-navbar-fixed-bottom,
.oj-applayout-fixed-top .oj-hybrid-applayout-navbar, .oj-hybrid-applayout-navbar-fixed-top .oj-hybrid-applayout-navbar {
  box-shadow: none;
  border-bottom: 1px solid #d5dfe5; }

.oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-page, .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-page, .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-page, .oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-fixed-top, .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-fixed-top, .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-fixed-top,
.oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-app, .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-app, .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-app,
.oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-fixed-bottom, .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-fixed-bottom, .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-fixed-bottom,
.oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar, .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar, .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar {
  box-shadow: none;
  border-top: 1px solid #d5dfe5; }

/* Deprecated. Use oj-hybrid-applayout-navbar-fixed-bottom or oj-hybrid-applayout-navbar-fixed-top nav bar instead. */
/* Deprecated. Use oj-hybrid-applayout-header or oj-hybrid-applayout-header-no-border to style the header instead. */
.oj-hybrid-applayout-navbar-page, .oj-hybrid-applayout-navbar-fixed-top {
  padding-top: 7.5px;
  padding-bottom: 7.5px; }

.oj-web-applayout-body {
  overflow-y: scroll; }

.oj-web-applayout-offcanvas {
  width: 90%;
  max-width: 320px;
  background-color: #313334;
  color: #ffffff; }

.oj-web-applayout-offcanvas-icon {
  font-size: 24px; }

.oj-web-applayout-page {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100vh; }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .oj-web-applayout-page {
    height: 100vh;
    min-height: 0; } }

_:-ms-lang(x), _:-webkit-full-screen .oj-web-applayout-page {
  height: auto;
  min-height: 100vh; }

.oj-web-applayout-max-width {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1440px;
  box-sizing: border-box; }

.oj-web-applayout-header,
.oj-web-applayout-footer,
.oj-web-applayout-navbar,
.oj-web-applayout-header + .oj-progressbar-embedded {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

.oj-web-applayout-header {
  background-color: #f6f6f7;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); }

html:not([dir="rtl"]) .oj-web-applayout-header .oj-flex-bar-start {
  padding-right: 10px; }

html[dir="rtl"] .oj-web-applayout-header .oj-flex-bar-start {
  padding-left: -10px; }

.oj-slow-boxshadow .oj-web-applayout-header {
  border-bottom: 1px solid #d5dfe5; }

.oj-web-applayout-header .oj-button {
  margin-bottom: 0; }

.oj-web-applayout-header > div:first-child {
  box-sizing: border-box; }

.oj-web-applayout-header > div:first-child::before {
  content: "";
  display: inline-block;
  min-height: 3.143rem;
  visibility: hidden; }

.oj-web-applayout-header > div,
.oj-web-applayout-footer > div {
  padding-left: 20px;
  padding-right: 20px; }

html:not([dir="rtl"]) .oj-web-applayout-header .oj-flex-bar-start .oj-button:first-child {
  margin-left: -0.625rem; }

html[dir="rtl"] .oj-web-applayout-header .oj-flex-bar-start .oj-button:first-child {
  margin-right: -0.625rem; }

html:not([dir="rtl"]) .oj-web-applayout-header .oj-flex-bar-start .oj-button.oj-button-lg:first-child {
  margin-left: -1.125rem; }

html[dir="rtl"] .oj-web-applayout-header .oj-flex-bar-start .oj-button.oj-button-lg:first-child {
  margin-right: -1.125rem; }

html:not([dir="rtl"]) .oj-web-applayout-header .oj-flex-bar-end .oj-button:last-child, html:not([dir="rtl"])
.oj-web-applayout-header .oj-flex-bar-end .oj-toolbar:last-child {
  margin-right: -0.625rem; }

html[dir="rtl"] .oj-web-applayout-header .oj-flex-bar-end .oj-button:last-child, html[dir="rtl"]
.oj-web-applayout-header .oj-flex-bar-end .oj-toolbar:last-child {
  margin-left: -0.625rem; }

.oj-web-applayout-header-title {
  font-size: 1.25rem;
  font-weight: normal;
  color: #595959;
  line-height: 0;
  padding: 0;
  margin: 0; }

.oj-web-applayout-navbar .oj-navigationlist-icon-only {
  padding-bottom: 3px; }

.oj-web-applayout-content {
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
  padding: 10px; }

.oj-web-applayout-footer {
  min-height: 3.571rem;
  box-sizing: border-box;
  border-top: 1px solid #d5dfe5;
  background-color: #f6f6f7;
  padding-top: 10px;
  padding-bottom: 10px; }

.oj-web-applayout-footer-item {
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto; }

@media screen and (max-width: 767px) {
  .oj-web-applayout-footer-item {
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center; } }

.oj-web-applayout-footer ul {
  margin: 0; }
  html:not([dir="rtl"]) .oj-web-applayout-footer ul {
    padding-left: 0; }
  html[dir="rtl"] .oj-web-applayout-footer ul {
    padding-right: 0; }

.oj-web-applayout-footer li {
  list-style: none;
  display: inline-block; }
  html:not([dir="rtl"]) .oj-web-applayout-footer li {
    margin-right: 10px;
    margin-left: 0;
    padding-right: 10px;
    border-right: 1px solid #d5dfe5; }
  html[dir="rtl"] .oj-web-applayout-footer li {
    margin-left: 5px;
    margin-right: 0;
    padding-left: 5px;
    border-left: 1px solid #d5dfe5; }

html:not([dir="rtl"]) .oj-web-applayout-footer li:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: none; }

html[dir="rtl"] .oj-web-applayout-footer li:last-child {
  margin-left: 0;
  padding-left: 0;
  border-left: none; }

/*# sourceMappingURL=oj-alta.css.map */